Fix colors

sonic16x · Nov 19, 2024 · ad09b70 · ad09b70
1 parent 932f13c
commit ad09b70
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 5 deletions.
diff --git a/src/colors.scss b/src/colors.scss
@@ -46,7 +46,7 @@
   --invalid-color: #E53935;
   --yellow-color: #FFB300;
   --header-background-color: #272727;
-  --input-border-color: #323232;
+  --input-border-color: #444;
   --shadow: 0 8px 16px rgba(0, 0, 0, .05);
   --border: 1px solid var(--input-border-color);
   --table-highlighted-cell: #BBDEFB;

diff --git a/src/components/Controls/Controls.scss b/src/components/Controls/Controls.scss
@@ -3,13 +3,13 @@
   margin-right: auto;
   margin-left: auto;
   box-shadow: var(--shadow);
-  border: var(--border);
   border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
   border-top: none;
   z-index: 1;
   max-width: 1024px;
   box-sizing: border-box;
   background: var(--light);
+  padding-bottom: 2px;
 
   .input-text {
     transition: margin-bottom var(--animation-duration) ease-in-out;

diff --git a/src/components/InputText/InputText.scss b/src/components/InputText/InputText.scss
@@ -21,7 +21,7 @@
     background: var(--light);
 
     &:focus {
-      outline: none;
+      outline: 2px solid var(--primary-color);
     }
 
     &:not([value=""]) {

diff --git a/src/components/LangSelector/LangSelector.scss b/src/components/LangSelector/LangSelector.scss
@@ -40,10 +40,18 @@
     padding: 0;
     width: 30px;
     height: 30px;
-    transition: transform var(--animation-duration) ease-in-out;
+    transition: transform var(--animation-duration) ease-in-out, background-color var(--animation-duration) ease-in-out;
+    border-radius: 50%;
 
     &.rotate {
       transform: rotate(180deg);
     }
+
+    &:hover {
+      background-color: rgba(0, 123, 255, .25);
+    }
+    &:focus {
+      outline: 2px solid var(--primary-color);
+    }
   }
 }
diff --git a/src/components/ResultsCard/ResultsCard.scss b/src/components/ResultsCard/ResultsCard.scss
@@ -3,7 +3,6 @@
   width: 100%;
   background: var(--light);
   box-shadow: var(--shadow);
-  border: var(--border);
   border-radius: var(--border-radius-s);
   max-width: 1024px;
   margin-bottom: var(--gap-size);

diff --git a/src/components/Selector/Selector.scss b/src/components/Selector/Selector.scss
@@ -23,6 +23,10 @@
     border: var(--border);
     border-radius: var(--border-radius-s);
     outline: none;
+
+    &:focus {
+      outline: 2px solid var(--primary-color);
+    }
   }
 
   &:after {