AG-38404 UI fixes based on design review

Squashed commit of the following: commit b86527d Merge: d76bb17 b73f017 Author: Kurbanali Ruslan <[email protected]> Date: Fri Dec 20 16:42:32 2024 +0500 Merge branch 'master' into fix/AG-38404 commit d76bb17 Author: Kurbanali Ruslan <[email protected]> Date: Fri Dec 20 12:12:46 2024 +0500 fixed body color commit e164aa7 Author: Kurbanali Ruslan <[email protected]> Date: Fri Dec 20 12:04:13 2024 +0500 fixed colors commit c927561 Author: Kurbanali Ruslan <[email protected]> Date: Thu Dec 19 19:09:42 2024 +0500 reverted back button commit bb8dd04 Author: Kurbanali Ruslan <[email protected]> Date: Thu Dec 19 17:55:10 2024 +0500 updated back button commit aaa11b5 Author: Kurbanali Ruslan <[email protected]> Date: Thu Dec 19 17:25:06 2024 +0500 fix text and icon colors commit 8daa48b Author: Kurbanali Ruslan <[email protected]> Date: Thu Dec 19 17:24:39 2024 +0500 fix search input style commit 377d869 Author: Kurbanali Ruslan <[email protected]> Date: Thu Dec 19 17:15:36 2024 +0500 fixed current location colors commit 097ca22 Author: Kurbanali Ruslan <[email protected]> Date: Thu Dec 19 17:09:32 2024 +0500 fixed button size commit c65e208 Author: Kurbanali Ruslan <[email protected]> Date: Thu Dec 19 17:01:56 2024 +0500 added back button commit 05b8340 Author: Kurbanali Ruslan <[email protected]> Date: Thu Dec 19 16:44:40 2024 +0500 fixed input styles commit 7859b93 Author: Kurbanali Ruslan <[email protected]> Date: Thu Dec 19 16:17:46 2024 +0500 fix secondary button color commit 7f6658d Author: Kurbanali Ruslan <[email protected]> Date: Wed Dec 18 17:24:43 2024 +0500 fixed button and link colors commit aec0f74 Author: Kurbanali Ruslan <[email protected]> Date: Wed Dec 18 15:57:20 2024 +0500 removed underline in context menu
AdguardTeam · Dec 20, 2024 · d887a28 · d887a28
1 parent b73f017
commit d887a28
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 55 deletions.
diff --git a/src/popup/components/Locations/Reload.tsx b/src/popup/components/Locations/Reload.tsx
@@ -29,6 +29,7 @@ export const Reload = observer(() => {
     const iconClass = cn(
         'icon',
         'icon--button',
+        'endpoints__reload-icon',
         { 'endpoints__reload-icon--active': arePingsRecalculating },
     );
 

diff --git a/src/popup/components/Locations/Search.tsx b/src/popup/components/Locations/Search.tsx
@@ -21,7 +21,7 @@ export const Search = ({ value, handleChange, handleClear }: SearchProps) => {
         <div className="endpoints__search">
             <input
                 autoFocus
-                className="endpoints__search-in"
+                className="form__input endpoints__search-in"
                 type="text"
                 placeholder={translator.getMessage('endpoints_search')}
                 value={value}

diff --git a/src/popup/components/Locations/endpoints.pcss b/src/popup/components/Locations/endpoints.pcss
@@ -7,7 +7,7 @@
     height: 100%;
     padding-top: 16px;
     transition: opacity var(--t3);
-    background-color: var(--white);
+    background-color: var(--fills-backgrounds-page-background-default);
     overflow: hidden;
 
     /* TODO: Remove it when popup design will be available in wider screens. */
@@ -54,6 +54,7 @@
         }
 
         &-icon {
+            color: var(--stroke-icons-product-icons-default);
 
             &--active {
                 pointer-events: none;
@@ -68,17 +69,7 @@
     }
 
     &__search-in {
-        width: 100%;
-        padding: 16px 45px 16px 15px;
-        font-size: 16px;
-        border: 0;
-        border-radius: 8px;
-        background-color: var(--endpoint-gray-background);
-        color: var(--gray-base);
-
-        &:focus {
-            outline: 1px solid var(--grayd8);
-        }
+        padding: 16px 45px 16px 16px;
     }
 
     &__cross {

diff --git a/src/popup/components/Ping/ping.pcss b/src/popup/components/Ping/ping.pcss
@@ -6,10 +6,10 @@
     text-align: right;
 
     &--success {
-        color: var(--green700);
+        color: var(--text-links-link-default);
     }
 
     &--warning {
-        color: var(--orange);
+        color: var(--text-links-attention-link-default);
     }
 }
diff --git a/src/popup/components/Settings/CurrentEndpoint/endpoint.pcss b/src/popup/components/Settings/CurrentEndpoint/endpoint.pcss
@@ -13,7 +13,7 @@
     cursor: pointer;
     border: 0;
     border-bottom: var(--endpoint-border-width) solid var(--grayd8);
-    background-color: var(--white);
+    background-color: var(--fills-backgrounds-page-background-default);
     transition: var(--t3) background-color;
 
     &:last-child {
@@ -48,6 +48,7 @@
 
         .icon--arrow {
             margin-left: 16px;
+            color: var(--stroke-icons-gray-icons-default);
         }
     }
 
@@ -87,6 +88,7 @@
         position: relative;
         font-size: 16px;
         line-height: 21px;
+        color: var(--text-main-text-main-default);
 
         &--selected {
             font-weight: 700;
@@ -98,7 +100,7 @@
     }
 
     &__desc {
-        color: var(--gray88);
+        color: var(--text-description-description-default);
     }
 
     &__limited-speed {

diff --git a/src/popup/components/Settings/ExclusionsScreen/ExclusionsScreen.tsx b/src/popup/components/Settings/ExclusionsScreen/ExclusionsScreen.tsx
@@ -37,7 +37,7 @@ export const ExclusionsScreen = observer(() => {
                 <button
                     onClick={onBtnClick}
                     type="button"
-                    className="button button--medium button--green"
+                    className="button button--medium button--main button--green"
                 >
                     {reactTranslator.getMessage('popup_settings_enable_vpn_short')}
                 </button>

diff --git a/src/popup/components/Settings/GlobalControl/GlobalControl.tsx b/src/popup/components/Settings/GlobalControl/GlobalControl.tsx
@@ -84,7 +84,7 @@ export const GlobalControl = observer(() => {
         <>
             <button
                 type="button"
-                className={`button button--medium ${buttonState.className}`}
+                className={`button button--medium button--main ${buttonState.className}`}
                 onClick={buttonState.handler}
             >
                 {buttonState.message}

diff --git a/src/popup/components/SkeletonLoading/SkeletonLoading.tsx b/src/popup/components/SkeletonLoading/SkeletonLoading.tsx
@@ -28,7 +28,7 @@ export const SkeletonLoading = () => {
                     <button
                         type="button"
                         tabIndex={-1}
-                        className="button button--medium button--green button--green--inactive"
+                        className="button button--medium button--green button--green--inactive button--main"
                     >
                         {reactTranslator.getMessage('settings_connect')}
                     </button>

diff --git a/src/popup/components/ui/Icons.tsx b/src/popup/components/ui/Icons.tsx
@@ -10,7 +10,7 @@ export const Icons = () => (
         </symbol>
 
         <svg id="right-arrow" width="8" height="14" viewBox="0 0 8 14" fill="none">
-            <path d="M1 13L7 7L1 1" stroke="#888888" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M1 13L7 7L1 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
 
         <symbol id="options" viewBox="0 0 24 24">
@@ -98,8 +98,8 @@ export const Icons = () => (
         </symbol>
 
         <symbol id="reload" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 25">
-            <path d="M6 7.5c3.6-5.2 13.5-3.5 14 5V14M18 17.5c-3.6 5.2-13.5 3.5-14-5v-1" stroke="var(--green700)" strokeWidth="1.5" strokeLinecap="round" />
-            <path d="m22 12.5-2 2-2-2M2 12.5l2-2 2 2" stroke="var(--green700)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6 7.5c3.6-5.2 13.5-3.5 14 5V14M18 17.5c-3.6 5.2-13.5 3.5-14-5v-1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            <path d="m22 12.5-2 2-2-2M2 12.5l2-2 2 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </symbol>
 
         <symbol id="closed_eye" viewBox="0 0 24 24">

diff --git a/src/popup/styles/button.pcss b/src/popup/styles/button.pcss
@@ -39,13 +39,6 @@ button,
         color: var(--white);
     }
 
-    &--inline {
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
     &--inline-green {
         color: var(--green74);
     }
@@ -81,11 +74,15 @@ button,
 
     &--green {
         color: #fff;
-        background-color: var(--green700);
+        background-color: var(--fills-buttons-main-button-default);
         transition: var(--t3) background-color;
 
         &:hover {
-            background-color: var(--green900);
+            background-color: var(--fills-buttons-main-button-hovered);
+        }
+
+        &:active {
+            background-color: var(--fills-buttons-main-button-pressed);
         }
 
         &--inactive {
@@ -121,10 +118,19 @@ button,
         display: inline;
         padding: 0;
         text-decoration: underline;
-        color: var(--green700);
+        color: var(--text-links-link-default);
         border: 0;
         appearance: none;
         border-radius: 0;
+        transition: var(--t3) color;
+
+        &:hover {
+            color: var(--text-links-link-hovered);
+        }
+
+        &:active {
+            color: var(--text-links-link-pressed);
+        }
     }
 
     &--green-gradient {
@@ -149,8 +155,8 @@ button,
     }
 
     &--outline-secondary {
-        border-color: var(--gray88);
-        color: var(--gray88);
+        border-color: var(--stroke-buttons-secondary-button-default);
+        color: var(--text-main-text-main-default);
         transition: var(--t3) background-color;
 
         &:hover {
@@ -204,4 +210,8 @@ button,
         font-size: 16px;
         line-height: 21px;
     }
+
+    &--main {
+        height: 56px;
+    }
 }
diff --git a/src/popup/styles/common.pcss b/src/popup/styles/common.pcss
@@ -26,7 +26,7 @@ body {
     font-size: 1.6rem;
     line-height: 1.4;
     color: var(--gray-base);
-    background-color: var(--white);
+    background-color: var(--fills-backgrounds-page-background-default);
 
     /* TODO: Remove it when popup design will be available in wider screens. */
     .android & {

diff --git a/src/popup/styles/form.pcss b/src/popup/styles/form.pcss
@@ -32,8 +32,8 @@
         display: block;
         font-size: 14px;
         text-align: left;
-        line-height: 18px;
-        color: var(--gray88);
+        line-height: 1.3;
+        color: var(--text-labels-labels-default);
         margin-bottom: 8px;
     }
 
@@ -59,26 +59,23 @@
         font-family: var(--font-stack);
         font-size: 16px;
         text-align: left;
-        border: 1px solid var(--grayf3);
+        border: 1px solid var(--stroke-inputs-inactive-input-stroke-default);
         border-radius: 8px;
-        color: var(--gray-base);
-        height: 50px;
+        color: var(--text-main-text-main-default);
+        height: 56px;
         padding: 16px;
         box-shadow: none;
-        background-color: var(--grayf3);
-        caret-color: var(--gray-base);
+        background-color: var(--fills-inputs-input-background-default);
+        caret-color: var(--text-main-text-main-default);
         overflow: hidden;
         text-overflow: ellipsis;
+        line-height: 1.3;
+        outline: none;
 
         &--password {
             padding: 16px 42px 16px 16px;
         }
 
-        @media (prefers-color-scheme: dark) {
-            background-color: var(--grayf7);
-            border: 1px solid var(--grayf7);
-        }
-
         &:-webkit-autofill:focus,
         &:focus:-webkit-autofill {
             background-color: var(--white);
@@ -91,13 +88,13 @@
 
         &::placeholder {
             font-size: 16px;
-            color: var(--gray-base);
-            opacity: 0.5;
+            line-height: 1.3;
+            color: var(--text-placeholder-placeholder-default);
         }
 
         &:focus,
         &:active {
-            border-color: var(--grayd8);
+            border-color: var(--stroke-inputs-active-input-stroke-default);
         }
 
         &--error,