removing gradients from styling, cleaning and simpling up

kevingroeger · May 14, 2020 · d911c13 · d911c13
1 parent 2b829bf
commit d911c13
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ts3audiobot-client",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "homepage": "./",
   "main": "public/electron.js",

diff --git a/public/electron.js b/public/electron.js
@@ -33,6 +33,8 @@ function createWindow () {
   mainWindow.on('closed', () => (
     mainWindow = null
   ))
+
+  isDev && mainWindow.webContents.openDevTools()
 }
 app.on('ready', createWindow)
 app.on('window-all-closed', () => {

diff --git a/src/App.css b/src/App.css
@@ -1,11 +1,11 @@
 .background {
   font-family: Roboto, sans-serif;
-  color: white;
+  color: #dedede;
   overflow-x: hidden;
   padding-top: 2.75rem;
   height: 100vh;
   width: 100vw;
-  background: radial-gradient( circle farthest-corner at 5% 20%,  rgba(45,46,53,1) 0%, rgba(20,27,34,1) 81.3% );
+  background: #232323;
 }
 
 .NavLink {
@@ -88,7 +88,7 @@
 }
 
 .NavBarSticky1 {
-  background: rgba(27,27,29,1);
+  background: #1e1e1e;
   position: fixed;
   -webkit-user-select: none;
   -webkit-app-region: drag;
@@ -100,7 +100,7 @@
 }
 
 .NavBarSticky2 {
-  background: rgba(27,27,29,1);
+  background: #1e1e1e;
   position: fixed;
   z-index: 3000;
   width: 6.5vw;
@@ -145,17 +145,10 @@
 }
 
 .createNewPlaylistButton {
-  background: rgba(32,49,66,1);
-  border: 1px solid rgba(255,255,255,.4);
   display: block;
   margin: 1rem 0 1rem -1rem;
 }
 
-.createNewPlaylistButton:hover {
-  background: rgba(32,49,66,1);
-  border: 1px solid rgba(255,255,255,.6);
-}
-
 .modal {
   position: fixed;
   z-index: 9999999;
@@ -172,7 +165,7 @@
   min-height: 12rem;
   min-width: 30rem;
   position: fixed;
-  background: radial-gradient( circle farthest-corner at 5% 20%,  rgba(45,46,53,1) 0%, rgba(20,27,34,1) 81.3% );
+  background: #303030;
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
   0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
 }
@@ -201,16 +194,10 @@
   width: 100%;
 }
 
+
 .modalContents>button {
   margin: 2rem 0;
   text-align: center;
-  background: rgba(64,90,116,1);
-  border: 1px solid rgba(32,45,58,1);
-}
-
-.modalContents>button:hover {
-  background: rgba(96,135,174,1);
-  border: 1px solid rgba(32,45,58,1);
 }
 
 .display-block {
@@ -287,7 +274,7 @@ svg:hover {
 
 .historyEntries {
   display: flex;
-  margin: 2rem 1rem 3rem 0rem;
+  margin: 2rem 1rem 3rem 0;
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
@@ -368,44 +355,40 @@ svg:hover {
   margin: 0 .5rem;
 }
 
-.styles {
-  text-align: center;
-  margin: 1rem 0;
-}
-
-.styles h5 {
-  margin-top: 1rem;
-  text-align: center;
-}
-
 .styles button {
   margin: 0 1rem;
   border: 2px solid black;
 }
 
 .baseUrl input {
   width: 40%;
+  font-weight: 300;
 }
 
 .baseUrl h5 {
   margin-top: 1rem;
+  font-size: 1.15rem;
+  font-weight: 300;
 }
 
 .bots input {
   width: 40%;
+  font-weight: 300;
 }
 
 .bots h5 {
   margin-top: 1.5rem;
+  font-size: 1.15rem;
+  font-weight: 300;
 }
 
 .settingsHl {
   text-align: center;
   margin-top: 1rem;
 }
 
-.settingsHl>.alert {
-  margin: 0 20%;
+.settingsHl h4 {
+  font-weight: 300;
 }
 
 .toastcontainer {
@@ -450,9 +433,9 @@ svg:hover {
 }
 
 .playMenu {
-  background-image: radial-gradient( circle farthest-corner at 20% 50%,  rgba(21,34,47,1) 10%, rgba(32,49,66,1) 71.3% );
+  background: #252525;
   color: white;
-  border-top: 1px solid black;
+  border-top: 1px solid #4f4f4f;
   height: 3.5rem;
   width: 100%;
   position: absolute;
@@ -481,8 +464,8 @@ svg:hover {
 
 .customTabs {
   position: fixed;
-  background-image: radial-gradient( circle farthest-corner at 5% 10%,  rgba(45,46,53,1) 2%, rgba(16,23,29,1) 67% );
-  border-right: 1px solid black;
+  background: #292929;
+  border-right: 1px solid #4f4f4f;
   min-height: 90vh;
   height: 100%;
   width: 23%;
@@ -497,14 +480,16 @@ svg:hover {
 }
 
 .nav-pills .nav-link:hover {
-  background: rgba(64,90,116,0.15);
+  background: #292929;
+  outline: none;
 }
 
 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
-  background: rgba(64,90,116,0.4);
+  background: #292929;
   width: 100%;
   color: white;
   font-weight: 400;
+  font-size: 1.025rem;
 }
 
 .searchAndPlayDiv {
@@ -525,35 +510,6 @@ svg:hover {
   outline: none;
 }
 
-.customButton {
-  background: rgba(32,49,66,1);
-  border: 1px solid rgba(255,255,255,.4);
-}
-
-.customButton:hover {
-  background: rgba(32,49,66,1);
-  border: 1px solid rgba(255,255,255,.6);
-}
-
-.customButton:active {
-  background: rgba(32,49,66,1) !important;
-  border: 1px solid rgba(255,255,255,.6);
-}
-.customButton:focus {
-  background: rgba(32,49,66,1);
-  border: 1px solid rgba(255,255,255,.6);
-}
-
-.customButton:not(disabled):active {
-  background: rgba(32,49,66,1);
-  border: 1px solid rgba(255,255,255,.6);
-}
-
-.customButton:disabled {
-  background: rgba(32,49,66,.3);
-  border: 1px solid rgba(255,255,255,.2);
-}
-
 .searchResultTimeStamp {
   text-align: right;
 }
@@ -614,10 +570,12 @@ div.react-player__preview:hover {
   border-top: 1px solid rgba(205,205,205,.6);
   font-size: .9rem;
   padding: .25rem 0;
+  font-weight: 300;
 }
 
 .searchResultRow:hover {
-  background: linear-gradient(90deg, rgba(64,90,116,0.4) 17%, rgba(64,90,116,1) 50%, rgba(64,90,116,0.4) 83%);
+  color: white;
+  background: linear-gradient(90deg, rgba(61,61,61,0.3) 17%, rgba(61,61,61,.6) 50%, rgba(61,61,61,0.3) 83%);
 }
 
 .searchResultRow > div {

diff --git a/src/components/Settings.js b/src/components/Settings.js
@@ -64,7 +64,7 @@ export default function Settings () {
         <p
           className='versionheader'
         >
-          v_1.0
+          v_1.0.1
         </p>
         {fetchError && (
           <Alert
@@ -125,7 +125,8 @@ export default function Settings () {
         >
           <Button
             onClick={() => handleSave()}
-            variant='dark'
+            variant='outline-light'
+            size={'sm'}
             className='somemargintop customButton'
           >
             Save

diff --git a/src/electron.js b/src/electron.js
diff --git a/src/features/playlist/Playlist.js b/src/features/playlist/Playlist.js
@@ -35,6 +35,7 @@ export default function Playlist ({ botId }) {
         handleClose={handleHideModal}
       />
       <Button
+        variant='outline-light'
         className='createNewPlaylistButton'
         onClick={handleShowModal}
         size={'sm'}

diff --git a/src/features/playlist/PlaylistModal.js b/src/features/playlist/PlaylistModal.js
@@ -74,8 +74,8 @@ export default function PlaylistModal ({
               placeholder={'https://www.youtube.com/watch?v=IIwiM777OzQ&list=PLRBp0Fe2GpgkDkEB_DuBqPuS5O3iIDQ2N'}
             />
             <Button
+              variant='outline-light'
               className='customButton'
-              variant='success'
               onClick={handleSubmit}
             >
               Submit

diff --git a/src/features/searchAndPlay/SearchAndPlayNow.js b/src/features/searchAndPlay/SearchAndPlayNow.js
@@ -48,6 +48,7 @@ function SearchAndPlayNow ({ botId }) {
         <Button
           size='sm'
           type='submit'
+          variant='outline-light'
           className='customButton'
           disabled={searchStatus === 'loading'}
         >