Ah global themes (#39)

* Switches themes/active mode when chosen from select drop down menu
* Switches between 6 themes
* Ability to switch themes
* Ability to switch between multiple application themes--comments and console.log removed

Author: AHyman18

app/components/mainpanel/Tables.tsx

@@ -35,14 +35,14 @@ const TableRow = styled.li<ITableRowProps>`
   display: flex;
   justify-content: space-between;
   list-style: none;
-  background-color: ${({ affected }) => (affected ? '#00b5cc' : 'transparent')};
+  background-color: ${ (props) => props.affected ? props.theme.tables.row : 'transparent'};
   border: none;
   padding: 5px;
   transition: 0.3s;
 
   :hover {
     transform: scale(1.01);
-    background-color: #e8ecf1;
+    background-color: ${props=>props.theme.tables.highlight};
     cursor: ${({ inTheQuery }) =>
       inTheQuery
         ? 'url(https://img.icons8.com/flat_round/20/000000/minus.png), auto'
@@ -62,6 +62,7 @@ const TableTitle = styled.p`
   padding: 5px;
   overflow-wrap: break-word;
 `;
+
 interface IForeignKey {
   column_name?: string;
   constraint_name?: string;
@@ -133,14 +134,12 @@ const Tables: React.SFC<Props> = ({
   let rows = [];
 
   for (let keys in columns) {
-    const primaryKey: boolean =
-      primarykey === columns[keys]['columnname'] ? true : false;
+    const primaryKey: boolean = (primarykey === columns[keys]['columnname']) ? true : false;
     let affected = false;
     let foreignKey = false;
     let foreignkeyTable = '';
     let foreignkeyColumn = '';
     let inTheQuery = false;
-
     if (Object.keys(selectedForQueryTables).includes(tableName)) {
       if (
         selectedForQueryTables[tableName].columns.includes(

app/components/omnibox/OmniBoxInput.tsx

@@ -23,9 +23,10 @@ const OmniBoxInputText = styled.textarea`
 
 const ExecuteQueryButton = styled.button`
   font-family: 'Poppins', sans-serif;
-  border: none;
-  background-color: #49cefe;
-  color: white;
+  border: ${props=>props.theme.executeButton.border};
+  background-color: ${props=>props.theme.executeButton.baseColor};
+  transition: 0.2s;
+  color: ${props =>props.theme.executeButton.fontColor};
   text-align: center;
   padding: 5px;
   font-size: 80%;

app/components/sidepanels/FavoritesPanel.tsx

@@ -8,8 +8,8 @@ const PanelWrapper = styled.div`
   height: 100vh;
   display: flex;
   justify-content: center;
-  background-color: ${props => props.theme.backgroundColor};
-  color: ${props => props.theme.fontColor};
+  background-color: ${props => props.theme.panel.baseColor};
+  color: ${props => props.theme.panel.fontColor};
 `;
 
 const FavoritesPanel = () => {

app/components/sidepanels/InfoPanel.tsx

@@ -7,9 +7,11 @@ interface ISidePanelTableWrapperProps {
 
 const SidePanelTableListWrapper = styled.div<ISidePanelTableWrapperProps>`
   color: black;
-  padding: 20px;
+  padding: 40px;
+  width: ${({ sidePanelVisibility }) =>
+    sidePanelVisibility ? '300px' : '0px'};
   height: 100vh;
-  background-color: ${props => props.theme.backgroundColor};
+  background-color: ${props => props.theme.panel.baseColor};
   color: ${props => props.theme.fontColor};
   transition: width 500ms ease-in-out;
 `;
@@ -19,34 +21,19 @@ const InfoSection = styled.div`
 `;
 
 const Title = styled.h1`
-  color: ${props => props.theme.fontColor};
+  color: ${props => props.theme.panel.fontColor};
 `;
 
 const Text = styled.p`
   font-size: 100%;
+  color: ${props => props.theme.panel.fontColor};
 `;
 
 const Label = styled.label`
   font-size: 80%;
+  color: ${props => props.theme.panel.fontColor};
 `;
 
-// interface IForeignKeys {
-//   column_name?: string
-//   constraint_name?: string
-//   foreign_column_name?: string
-//   foreign_table_name?: string
-//   foreign_table_schema?: string
-//   table_name?: string
-//   table_schema?: string
-// }
-
-// interface IColumns {
-//   characterlength?: string
-//   columnname?: string
-//   datatype?: string
-//   defaultvalue?: string
-// }
-
 interface ISelectedTable {
   columns?: any[];
   foreignKeys?: any[];

app/components/sidepanels/SettingsPanel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useReducer, useContext, useState } from 'react';
+import { useReducer, useContext, useState, useEffect } from 'react';
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 import { ipcRenderer } from 'electron';
@@ -15,8 +15,8 @@ const PanelWrapper = styled.div`
   padding: 20px;
   height: 100vh;
   padding: 40px;
-  background-color: ${props => props.theme.backgroundColor};
-  color: ${props => props.theme.fontColor};
+  background-color: ${props => props.theme.panel.baseColor};
+  color: ${props => props.theme.panel.fontColor};
 `;
 
 const TopSection = styled.section`
@@ -33,18 +33,22 @@ const DivWrapper = styled.div`
   flex-direction: column;
 `;
 const Title = styled.h1`
-  color: ${props => props.theme.fontColor};
+  color: ${props => props.theme.panel.headerColor};
   font-size: 30px;
 `;
 const Label = styled.label`
-  color: ${props => props.theme.fontColor};
+  color: ${props => props.theme.panel.fontColor};
   padding: 10px 0;
 `;
+const SignOut = styled.span`
+  color: ${props => props.theme.link.signOut};
+`;
 
 
 const SettingsPanel = ({ intervalId }) => {
   const [context, setContext] = useContext(Context);
   const [state, dispatch] = useReducer(themeReducer, context);
+  const [activeMode, setActiveMode] = useState('default');
   const [toggle, setToggle] = useState(false);
   const contextText = context.light.toString();
 
@@ -53,24 +57,34 @@ const SettingsPanel = ({ intervalId }) => {
     ipcRenderer.send('logout-to-main', 'userlogout');
   }
 
+  useEffect(() => {
+    setContext(state);
+  }, [state]);
+ 
   return (
     <PanelWrapper>
       <TopSection>
         <Title>Settings</Title>
 
         <DivWrapper>
           <Label>Theme</Label>
-          <button
-            onClick={() => {
-              setToggle(!toggle);
-              setContext(state);
-              toggle
-                ? dispatch({ type: 'TOGGLE_DARK' })
-                : dispatch({ type: 'TOGGLE_LIGHT' });
+          <select
+            name="modeList"
+            onChange={e => {
+              setActiveMode(e.target.value);
+              dispatch({
+                type: 'CHANGE_MODE',
+                selected: e.target.value,
+                payload: activeMode
+              });
             }}
           >
-            {contextText}
-          </button>
+            {context.map(modeObj => (
+              <option key={modeObj.value} value={modeObj.value}>
+                {modeObj.value}
+              </option>
+            ))}
+          </select>
         </DivWrapper>
         <DivWrapper>
           <Label>Font Size</Label>
@@ -82,14 +96,16 @@ const SettingsPanel = ({ intervalId }) => {
           </select>
         </DivWrapper>
       </TopSection>
-      <BottomSection>
-        <div style={state}>CHANGE ME HEY BLAHHSLAH</div>
-          <NavLink onClick={logOut} to="/" activeStyle={{ color: 'black ' }}>
-            Log Out
-          </NavLink>
+      <BottomSection>  
+        <NavLink onClick={logOut} to="/">
+          <SignOut>
+            SignOut
+          </SignOut>
+        </NavLink>
       </BottomSection>
     </PanelWrapper>
   );
 };
 
 export default SettingsPanel;
+

app/containers/HomePage.tsx

@@ -49,7 +49,7 @@ const CollapseBtn = styled.button<ICollapseBtnProps>`
 `;
 
 const MainPanel = styled.div`
-  background-color: #f2f1ef;
+  background-color: ${props=>props.theme.main.baseColor};
   padding: 5px 20px;
   display: flex;
   flex-direction: column;

app/containers/SidePanel.tsx

@@ -15,9 +15,8 @@ interface IIndTabProps {
 }
 
 const PanelWrapper = styled.div<IPanelWrapperProps>`
-  visibility: ${({ sidePanelVisibility }) =>
-    sidePanelVisibility ? 'visible' : 'collapse'};
-  width: 300px;
+  width: ${({ sidePanelVisibility }) =>
+    sidePanelVisibility ? '375px' : '0px'};
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -34,9 +33,10 @@ const IndTab = styled.button<IIndTabProps>`
   font-family: 'Poppins', sans-serif;
   border: none;
   padding: 5px;
-  background-color: ${props =>
-    props.active === props.panel ? '#e8ecf1' : '#fdfdfe'}
-  
+
+  background-color: ${props => props.active ===props.panel? props.theme.tabs.baseColor :props.theme.panel.baseColorActive};
+  color: ${props=>props.theme.tabs.fontColor};
+
   :hover {
     font-weight: bold;
   }

app/containers/mainpanel/ResultsContainer.tsx

@@ -26,17 +26,18 @@ interface IResultsNavButtonProps {
     border: none;
     border-bottom: ${({ activeDisplayInResultsTab, activetabname }) =>
       activeDisplayInResultsTab === activetabname
-        ? '3px solid #013243'
+        ? `3px solid ${props=>props.theme.tables.navButtonSelect}`
         : '3px solid transparent'};
     padding: 8px;
     transition: 0.3s;
     font-size: 80%;
-    background-color: transparent;
+    background-color: ${props=>props.theme.tables.navButtonBase};
+    color: ${props=>props.theme.tables.navButtonFontColor}
     :focus {
       outline: none;
     }
     :hover {
-      border-bottom: 3px solid black;
+      border-bottom: 3px solid ${props=> props.theme.tables.navButtonHover};
     }
   `;
 
@@ -53,7 +54,7 @@ const ResetQueryButton = styled.button`
   background-color: transparent;
   :hover{
     font-weight: bold;
-    color: #ca333e;
+    color: ${props=> props.theme.tables.resetButton};
   }
   :focus{
     outline: none;

app/containers/mainpanel/TablesContainer.tsx

@@ -26,7 +26,7 @@ const ViewInfoButton = styled.button`
   transform: 0.3s;
 
   :hover {
-    color: #013243;
+    color: ${props=> props.theme.tables.infoButton};
     font-weight: bold;
   }
   :focus {
@@ -60,14 +60,14 @@ interface IPinButtonProps {
 
 const PinBtn = styled.button<IPinButtonProps>`
   border: none;
-  background-color: ${props => (props.pinned ? 'rgb(93, 0, 250)' : 'white')};
-  color: ${props => (props.pinned ? 'white' : 'black')};
+  background-color: ${props => (props.pinned ? props.theme.tables.pinnedButton : 'white')};
+  color: ${props => (props.pinned ? props.theme.tables.pinnedButtonFontColor : 'black')};
   padding: 5px;
   border-radius: 3px;
 
   :hover {
     font-weight: bold;
-    color: #00b5cc;
+    color: ${props=>props.theme.tables.pinnedHover};
   }
   :focus {
     outline: none;