[WIP] WebUI v2 changes (#235)

* Update fonts * Update theme, dashboard. Sidebar WIP * Get episode name from anidb instead of tvdb * Change 'Info' to 'Video Info' in Import Breakdown * Update login page * Change logo * Add help to login page * Update tailwindcss to v2 * Update input components * A bunch of changes * Move autoprefixer and tailwind to devdeps * Update firstrun wizard, add transitions * Update sidebar, settings, scrollbar. Add types, new transitions. Break UI in firstrun wizard. * Fix indentation * Refactor class components to functional components * Update eslint & related packages. Fix lint errors * Fix more lint errors * Fix settings. Get rid of warnings
ShokoAnime · Jun 2, 2021 · cd6efb3 · cd6efb3
1 parent d9ddfba
commit cd6efb3
Show file tree

Hide file tree

Showing 102 changed files with 4,314 additions and 5,118 deletions.
diff --git a/css/common.scss b/css/common.scss
@@ -5,7 +5,6 @@ $accent-color: #4ac767;
 $accent-color-hover: #3ab857;
 $accent-color-secondary: #279ceb;
 $danger-color: #FF3F57;
-$sidebar-background-color: #0a0b1d;
 $sidebar-item-color: white;
 
 $panel-background-color: #f5f6f8;
@@ -14,22 +13,58 @@ $panel-header-color: #5a5a5a;
 
 $website-background-color: #e9edf2;
 
-$text-color: #333333;
-
 $button-unselected: #8F9290;
 
+
+
+$background-color-1: #1F2531;
+$background-color-2: #282C38;
+$background-color-3: #151B29;
+$background-color-4: #1B202B;
+
+$border-color-1: #3C3C53;
+
+$highlight-color-1: #279CEB;
+$highlight-color-2: #3E7BFA;
+$highlight-color-4: #FF3F57;
+$highlight-color-6: #F1C40F;
+
+$icon-color: #C6CED2;
+
+$text-color: #CFD8E3;
+
+
+$temp-color-2: #00000029;
+$temp-color-3: #FFFFFF;
+$temp-color-5: #DA3FFF;
+
+
 input, button, textarea, :focus {
   outline: none;
 }
 
 body {
-  font-family: 'Exo 2', Muli, Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  background-color: $website-background-color;
+  font-family: 'Exo 2', Mulish, -apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;
+  background-color: $background-color-2;
   color: $text-color;
 }
 
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: $background-color-2; 
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: $highlight-color-2;
+  border-radius: 10px;
+  border: 2px solid $background-color-2;
+}
+
 #app-root {
   flex: 1;
   height: 100vh;
@@ -60,35 +95,52 @@ body {
   color: white;
 }
 
-.color-accent {
-  color: $accent-color;
+.color-highlight-1 {
+  color: $highlight-color-1 !important;
 }
 
-.bg-color-accent {
-  background-color: $accent-color;
-  color: white;
+.color-highlight-2 {
+  color: $highlight-color-2 !important;
 }
 
-.color-accent-secondary {
-  color: $accent-color-secondary;
+.bg-color-highlight-1 {
+  background-color: $highlight-color-1;
 }
 
-.bg-color-accent-secondary {
-  background-color: $accent-color-secondary;
-  color: white;
+.bg-color-highlight-2 {
+  background-color: $highlight-color-2;
+}
+
+.bg-color-1 {
+  background-color: $background-color-1;
+}
+
+.bg-color-2 {
+  background-color: $background-color-2;
+}
+
+.bg-color-3 {
+  background-color: $background-color-3;
+}
+
+.bg-color-4 {
+  background-color: $background-color-4;
+}
+
+button.color-highlight-1:hover {
+  color: $highlight-color-2 !important;
 }
 
 .color-danger {
-  color: $danger-color;
+  color: $highlight-color-4;
 }
 
 .bg-color-danger {
-  background-color: $danger-color;
-  color: white;
+  background-color: $highlight-color-4;
 }
 
 .border-color-danger {
-  border-color: $danger-color;
+  border-color: $highlight-color-4;
 }
 
 .fa-layer-icon-bg {
@@ -121,48 +173,31 @@ body {
   padding: 1.5rem 0;
 }
 
-.sidebar-container {
-  width: 24.5rem;
-}
-
-.sidebar {
-  background-color: $sidebar-background-color;
-  color: $sidebar-item-color;
-  width: 24.5rem;
-}
 
 .sidebar-item {
+  color: $icon-color;
   cursor: pointer;
 }
 
 .sidebar-item:hover {
-  color: $accent-color;
+  color: $highlight-color-1;
 }
 
 .header {
   background-color: $panel-background-color;
   border-color: $panel-header-color;
 }
 
-.user-dropdown-toggle:hover {
-  background-color: $website-background-color;
-}
-
-.user-dropdown {
-  background-color: $panel-background-color;
-  border-color: $panel-header-color;
-}
-
-.fixed-panel {
-  background-color: $panel-background-color;
+.user-icon {
+  background-color: $highlight-color-1;
 }
 
-.fixed-panel-header {
-  color: $panel-header-color;
+.user-icon:hover {
+  background-color: $highlight-color-2;
 }
 
-.font-muli {
-  font-family: 'Muli';
+.font-mulish {
+  font-family: 'Mulish';
 }
 
 .font-exo2 {

diff --git a/css/dashboard.scss b/css/dashboard.scss
@@ -1,7 +1,3 @@
-button.color-accent:hover {
-  color: $accent-color-hover;
-}
-
 .recent-files .panel-block {
   height: 15em;
   overflow-y: auto;

diff --git a/css/firstrun.scss b/css/firstrun.scss
diff --git a/css/input.scss b/css/input.scss
@@ -1,10 +1,33 @@
 .input-field {
-  border-color: $text-color;
-  background-color: inherit;
+  border: 1px solid transparent;
+}
+
+.input-field:focus {
+  border: 1px solid $highlight-color-1;
+}
+
+.checkbox {
+  border: 1px solid transparent;
+}
+
+.checkbox-focused {
+  border: 1px solid $highlight-color-1;
+}
+
+.button {
+  border: 2px solid transparent;
+}
+
+.button:focus-visible {
+  border: 2px solid $text-color;
 }
 
 .select-field {
-  background-color: inherit;
+  border: 1px solid transparent;
+}
+
+.select-field:focus-visible {
+  border: 1px solid $highlight-color-1;
 }
 
 // For Chrome, Safari, Edge

diff --git a/css/login.scss b/css/login.scss
@@ -1,22 +1,6 @@
 .login-image {
-  background-image: url('/webui/left-img.jpg');
+  background-image: url('/api/v2/image/7/random'), url('/webui/left-img.jpg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
 }
-
-.login-panel {
-  background-color: $secondary-panel-background-color;
-  width: 62rem;
-  height: 25rem;
-}
-
-.logo {
-  width: 32rem;
-  color: $secondary-panel-background-color;
-  background-color: rgba($sidebar-background-color, 0.6);
-}
-
-.help {
-  background-color: $sidebar-background-color;
-}
diff --git a/css/main.scss b/css/main.scss
@@ -5,7 +5,6 @@
 @import "dashboard";
 @import "error-page";
 @import "settings";
-@import "firstrun";
 @import "actions";
 @import "import-folders";
 @import "input";

diff --git a/css/modals.scss b/css/modals.scss
@@ -1,5 +1,5 @@
 .modal { // React-Modal
-  background-color: white;
+  background-color: $background-color-1;
 }
 
 .modal-overlay { // React-Modal Overlay
@@ -30,8 +30,8 @@
 }
 
 .profile-modal-image-alpha {
-  color: $secondary-panel-background-color;
-  background-color: rgba($sidebar-background-color, 0.6);
+  color: $background-color-2;
+  background-color: rgba($background-color-1, 0.6);
 }
 
 .browse-folder-modal {