New colours + status bar (#34)

Author: micahdbak

package.json

@@ -8,8 +8,8 @@
   "scripts": {
     "lint": "prettier --write .",
     "prebuild": "rm -Rf ./build/*",
-    "tailwind": "tailwindcss -i ./tailwind.css -o ./public/static/css/tailwind.css",
-    "prestart": "npm run tailwind",
+    "tw": "tailwindcss -i ./tailwind.css -o ./public/static/css/tailwind.css",
+    "prestart": "npm run tw",
     "start": "webpack serve --mode development",
     "build": "webpack --mode production",
     "postbuild": "npm run tailwind && cp -R ./public/* ./build"

src/_shared/react/VSCode/NavBar.css

@@ -18,7 +18,7 @@
 }
 
 .csss-nav-app-drawer > *:hover {
-  background-color: #334155; /* one of the TW slate colours */
+  background-color: #3f3f46; /* zinc-700 */
   cursor: pointer;
 }
 

src/_shared/react/VSCode/NavBar.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import * as Flex from '../Flex';
-import { Arrow, Cross, CSSS, Folder, File, Film, Hamburger } from '../Icon';
+import * as Icon from '../Icon';
 
 import './NavBar.css'; // csss-nav-app-drawer, csss-nav-mobile-menu
 
@@ -31,8 +31,7 @@ export const NavBar = ({
   const navBar = (
     <div
       className={
-        'flex w-full h-full flex-row items-stretch overflow-x-hidden bg-slate-900 ' +
-        (isMobileDevice ? 'border-r border-slate-700 ' : '') +
+        'flex w-full h-full flex-row items-stretch overflow-x-hidden bg-zinc-950 border-r border-zinc-900 ' +
         className
       }
       style={style}
@@ -43,15 +42,16 @@ export const NavBar = ({
         I chose to define the app drawer's styles in this CSS file as
         Tailwind is finicky for what I want to do; raw CSS is easier. 
       */}
-      <div className="csss-nav-app-drawer border-slate-700 border-r">
+      <div className="csss-nav-app-drawer border-zinc-800 border-r">
+        <Icon.CSSS style={{ '--csss-icon-color': 'white' }} />
         {apps}
       </div>
       {/* navigation drawer */}
       <div className="h-full flex flex-col grow gap-px overflow-y-scroll">
         <div className="flex flex-row p-3 h-10 w-full align-center justify-between">
-          <h2 className="text-slate-400">{title}</h2>
+          <h2 className="text-zinc-400">{title}</h2>
           {!isMobileDevice && (
-            <p className="text-slate-400">&#183;&#183;&#183;</p>
+            <p className="text-zinc-400">&#183;&#183;&#183;</p>
           )}
         </div>
         {/* folders and items */}
@@ -63,10 +63,10 @@ export const NavBar = ({
   if (isMobileDevice) {
     return (
       <>
-        <div className="flex flex-row p-3 h-full w-full align-center justify-between bg-slate-800 border-b border-slate-600">
-          <h2 className="block text-slate-400 leading-10 text-lg">{title}</h2>
+        <div className="flex flex-row p-3 h-full w-full align-center justify-between bg-zinc-950 border-b border-zinc-900">
+          <h2 className="block text-zinc-400 leading-10 text-lg">{title}</h2>
           <button
-            className="rounded bg-slate-800 hover:bg-slate-600 font-bold text-lg text-slate-400 w-10 h-10 border border-slate-600"
+            className="rounded bg-zinc-950 hover:bg-zinc-900 font-bold text-lg text-zinc-400 w-10 h-10 border border-zinc-700"
             onClick={toggleMenu}
           >
             {/* looks like [...] */}
@@ -78,7 +78,9 @@ export const NavBar = ({
           csss-nav-mobile-menu in ./NavBar.css. Ditto ^^. 
         */}
         <div className={'csss-nav-mobile-menu ' + (isOpen ? '' : 'hidden')}>
-          <div className="navbar">{navBar}</div>
+          <div className="navbar" onClick={toggleMenu}>
+            {navBar}
+          </div>
           <div className="exit" onClick={toggleMenu} />
         </div>
       </>

src/_shared/react/VSCode/NavFolder.js

@@ -11,21 +11,15 @@ export const NavFolder = ({ text, children }) => {
   };
 
   const arrowStyle = {
-    '--csss-icon-color': '#94a3b8', // slate-400
+    '--csss-icon-color': '#a1a1aa', // zinc-400
     '--csss-icon-stroke-width': '3px'
   };
 
-  /*
-  const folderStyle = {
-    '--csss-icon-color': '#64748b' // slate-500
-  };
-  */
-
   return (
     <>
       <button
         onClick={toggleOpen}
-        className="block bg-slate-900 hover:bg-slate-800 mx-1 py-1 px-2 text-md text-slate-500 flex items-center gap-2 rounded-sm"
+        className="block bg-zinc-950 hover:bg-zinc-800 mx-1 py-1 px-2 text-md text-zinc-500 flex items-center gap-2 rounded-sm"
         style={{
           // width is set using a calc as buttons don't stretch in a flex-box
           width: 'calc(100% - 8px)' // 24px = 2 * mx-1
@@ -36,7 +30,6 @@ export const NavFolder = ({ text, children }) => {
         ) : (
           <Arrow style={{ transform: 'rotate(-90deg)', ...arrowStyle }} />
         )}
-        {/*<Folder style={folderStyle} />*/}
         {text}
       </button>
       {isOpen ? children : []}

src/_shared/react/VSCode/NavItem.js

@@ -1,28 +1,40 @@
 import React from 'react';
 import { useLocation, Link } from 'react-router-dom';
 
-import { File } from '../Icon';
+import * as Icon from '../Icon';
 
-export const NavItem = ({ text, to, isInFolder }) => {
-  const fileStyle = {
-    '--csss-icon-color': '#94a3b8', // slate-400
+export const NavItem = ({ text, to, href, isInFolder, icon }) => {
+  const iconStyle = {
+    '--csss-icon-color': '#a1a1aa', // zinc-400
     '--csss-icon-stroke-width': '3px'
   };
 
   const location = useLocation();
+  let _icon = icon;
+
+  if (_icon === undefined) {
+    _icon =
+      to !== undefined ? (
+        <Icon.File style={iconStyle} />
+      ) : (
+        <Icon.Link style={iconStyle} />
+      );
+  }
+
+  const _href = href !== undefined ? href : `/#${to.substr(1)}`;
 
   return (
     <a
       className={
-        'mx-1 py-1 px-2 text-md flex items-center gap-2 rounded-sm ' +
-        (isInFolder ? 'pl-8 text-white ' : 'text-white ') +
+        'mx-1 py-1 px-2 text-md flex items-center gap-2 rounded-sm text-white ' +
+        (isInFolder ? 'pl-8 ' : '') +
         (location.pathname === to
-          ? 'bg-slate-800 hover:bg-slate-700'
-          : 'bg-slate-900 hover:bg-slate-700')
+          ? 'bg-zinc-800 hover:bg-zinc-800'
+          : 'bg-zinc-950 hover:bg-zinc-800')
       }
-      href={'/#' + to.substr(1)}
+      href={_href}
     >
-      <File style={fileStyle} />
+      {_icon}
       {text}
     </a>
   );

src/_shared/react/VSCode/NavLink.js

@@ -1,4 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
 
 import * as helpers from '../../js';
 import * as Flex from '../Flex';
@@ -32,13 +34,13 @@ export const Page = (props) => {
           ? '1fr' // one column
           : '320px 1fr' // two columns
       }
-      rows={isMobileDevice ? '64px 1fr' : '1fr'}
+      rows={isMobileDevice ? '64px 1fr 32px' : '1fr 32px'}
       areas={
         isMobileDevice
-          ? ['navbar', 'content'] // two rows
-          : ['navbar content'] // one row
+          ? ['.', '.', 'bottom-bar'] // three rows
+          : ['. .', 'bottom-bar bottom-bar'] // two rows
       }
-      className="bg-slate-800"
+      className="bg-zinc-900"
       style={{
         margin: 'auto',
         width: '100vw',
@@ -51,26 +53,42 @@ export const Page = (props) => {
       </NavBar>
       {isMobileDevice ? (
         <Grid.Item
-          area="content"
           className="overflow-y-scroll text-white"
           style={{
             maxWidth: '768px',
             width: '100%',
-            height: '100vh',
+            height: '100%',
             margin: 'auto'
           }}
         >
           {children}
         </Grid.Item>
       ) : (
         <Grid.Item
-          area="content"
           className="overflow-y-scroll text-white"
-          style={{ height: '100vh' }}
+          style={{ height: '100%' }}
         >
           {children}
         </Grid.Item>
       )}
+      <div
+        className="bg-zinc-950 border-t border-zinc-800 flex flex-row"
+        style={{
+          'grid-area': 'bottom-bar'
+        }}
+      >
+        <p
+          className="bg-blue-500 text-white text-sm"
+          style={{
+            height: '100%',
+            padding: '0 8px',
+            lineHeight: '32px'
+          }}
+        >
+          <FontAwesomeIcon icon={faCodeBranch} />
+          &nbsp;main
+        </p>
+      </div>
     </Grid.Container>
   );
 };

src/_shared/react/VSCode/Page.js

@@ -1,5 +1,4 @@
 export * from './NavBar.js';
 export * from './NavFolder.js';
 export * from './NavItem.js';
-export * from './NavLink.js';
 export * from './Page.js';

src/_shared/react/VSCode/index.js

@@ -10,7 +10,7 @@ import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 
 const Footer = () => {
   return (
-    <footer className="bg-[#0f172a] text-white py-8 mt-8">
+    <footer className="bg-zinc-950 text-white py-8 mt-8">
       <div className="max-w-4xl mx-auto px-4">
         <div className="flex flex-col md:flex-row justify-between items-center">
           <div className="mb-4 md:mb-0 text-center md:text-left">

src/main/components/Footer.js

@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
 
 import { Icon, Flex, Grid, VSCode } from '../../_shared/react';
 import * as helpers from '../../_shared/js';
@@ -7,17 +9,16 @@ import * as helpers from '../../_shared/js';
 export const Page = ({ children }) => {
   const apps = (
     <>
-      <Icon.CSSS style={{ '--csss-icon-color': 'white' }} />
       <Icon.Folder
         style={{
-          '--csss-icon-color': '#64748b' // slate-500
+          '--csss-icon-color': '#a1a1aa' // zinc-400
         }}
       />
       <a style={{ marginTop: 'auto' }} href="#profile">
         <Icon.Profile
           style={{
             width: '100%',
-            '--csss-icon-color': '#64748b', // slate-500
+            '--csss-icon-color': '#a1a1aa', // zinc-400
             '--csss-icon-stroke-width': '1px'
           }}
         />
@@ -28,35 +29,41 @@ export const Page = ({ children }) => {
   const files = (
     <>
       <VSCode.NavItem text="README.md" to="/" />
-      <VSCode.NavItem text="login.txt" to="/profile" />
+      <VSCode.NavFolder text="The CSSS">
+        <VSCode.NavItem isInFolder={true} text="About.md" to="/about" />
+        <VSCode.NavItem
+          isInFolder={true}
+          text="Common Rooms.md"
+          to="/common_rooms"
+        />
+        <VSCode.NavItem isInFolder={true} text="Officers.md" to="/officers" />
+        <VSCode.NavItem isInFolder={true} text="Documents.md" to="/documents" />
+      </VSCode.NavFolder>
       <VSCode.NavFolder text="Events">
-        <VSCode.NavLink
+        <VSCode.NavItem isInFolder={true} text="About Events.md" to="/events" />
+        <VSCode.NavItem
           isInFolder={true}
-          text="mountain_madness.html"
+          text="Mountain Madness"
           href="/mountain_madness"
         />
-        <VSCode.NavLink
+        <VSCode.NavItem
           isInFolder={true}
-          text="fall_hacks.html"
+          text="Fall Hacks"
           href="/fall_hacks"
         />
-        <VSCode.NavLink
+        <VSCode.NavItem isInFolder={true} text="Tech Fair" href="/tech_fair" />
+      </VSCode.NavFolder>
+      <VSCode.NavFolder text="Committees">
+        <VSCode.NavItem
           isInFolder={true}
-          text="tech_fair.html"
-          href="/tech_fair"
+          text="Our Committees.md"
+          to="/committees"
         />
-      </VSCode.NavFolder>
-      <VSCode.NavFolder text="Links">
-        <VSCode.NavLink
+        <VSCode.NavItem
           isInFolder={true}
           text="Discord"
           href="https://discord.gg/sfucsss"
         />
-        <VSCode.NavLink
-          isInFolder={true}
-          text="GitHub"
-          href="https://github.com/CSSS"
-        />
       </VSCode.NavFolder>
     </>
   );