add prefix yoroi for css props

Emurgo · Oct 13, 2021 · e3f30b1 · e3f30b1
1 parent aeaee70
commit e3f30b1
Show file tree

Hide file tree

Showing 174 changed files with 786 additions and 841 deletions.
diff --git a/packages/yoroi-extension/app/components/buySell/BuySellDialog.scss b/packages/yoroi-extension/app/components/buySell/BuySellDialog.scss
@@ -6,7 +6,7 @@
   max-height: 600px;
 
   .description {
-    color: var(--th-palette-gray-900);
+    color: var(--yoroi-palette-gray-900);
     font-weight: 400;
     font-size: 16px;
     line-height: 19px;
@@ -70,10 +70,10 @@
     height: 20px;
     width: 20px;
     path {
-      fill: var(--th-palette-gray-800);
+      fill: var(--yoroi-palette-gray-800);
     }
   }
   &:hover {
-    background-color: var(--th-palette-gray-50);
+    background-color: var(--yoroi-palette-gray-50);
   }
 }
diff --git a/packages/yoroi-extension/app/components/common/Autocomplete.js b/packages/yoroi-extension/app/components/common/Autocomplete.js
@@ -189,7 +189,7 @@ function Autocomplete({
           <Box
             sx={{
               padding: '14px 20px',
-              bgcolor: 'var(--th-palette-common-white)',
+              bgcolor: 'var(--yoroi-palette-common-white)',
             }}
           >
             {noResultsMessage}
@@ -204,8 +204,8 @@ function Autocomplete({
                     padding: '14px 20px',
                     backgroundColor:
                       highlightedIndex === index
-                        ? 'var(--th-palette-gray-50)'
-                        : 'var(--th-palette-common-white)',
+                        ? 'var(--yoroi-palette-gray-50)'
+                        : 'var(--yoroi-palette-common-white)',
                     cursor: 'pointer',
                   }}
                   {...getItemProps({
@@ -246,7 +246,7 @@ const CheckWrapper = styled(Box)({
 
 const ULList = styled(Box)({
   width: '100%',
-  background: 'var(--th-palette-common-white)',
+  background: 'var(--yoroi-palette-common-white)',
   margin: 0,
   borderTop: 0,
   position: 'absolute',
@@ -266,15 +266,15 @@ const InputWrapper = styled(Box)(
   width: 100%;
   border: ${isOpen ? '2px' : '1px'} solid ${
     error
-      ? 'var(--component-input-error)'
+      ? 'var(--yoroi-comp-input-error)'
       : isOpen
-      ? 'var(--component-input-text-focus)'
+      ? 'var(--yoroi-comp-input-text-focus)'
       : theme.name === 'classic'
       ? '#c7ced6'
-      : 'var(--component-input-border)'
+      : 'var(--yoroi-comp-input-border)'
   };
   border-radius: ${theme.name === 'classic' ? '0' : '8px'};
-  background-color: ${theme.name === 'classic' ? '#f4f4f6' : 'var(--th-palette-common-white)'};
+  background-color: ${theme.name === 'classic' ? '#f4f4f6' : 'var(--yoroi-palette-common-white)'};
   min-height: ${theme.name === 'classic' ? '73px' : '140px'};
   align-content: baseline;
   display: inline-flex;
@@ -286,7 +286,7 @@ const InputWrapper = styled(Box)(
   cursor: text;
   & input {
     background-color: transparent;
-    color: ${theme.name === 'classic' ? 'var(--component-input-border)' : '#000000d9'};
+    color: ${theme.name === 'classic' ? 'var(--yoroi-comp-input-border)' : '#000000d9'};
     font-size: 1rem;
     padding: 4px 6px;
     letter-spacing: 0;

diff --git a/packages/yoroi-extension/app/components/common/CheckboxLabel.js b/packages/yoroi-extension/app/components/common/CheckboxLabel.js
@@ -53,7 +53,7 @@ function CheckboxLabel({
           <Typography
             marginBottom={description !== null ? '8px' : 0}
             sx={{
-              color: 'var(--component-checkbox-text)',
+              color: 'var(--yoroi-comp-checkbox-text)',
               fontWeight: 300,
               ...(labelSx !== null && labelSx),
             }}

diff --git a/packages/yoroi-extension/app/components/common/NumericInputRP.js b/packages/yoroi-extension/app/components/common/NumericInputRP.js
@@ -486,7 +486,7 @@ class AmountInput extends Component<AmountInputProps> {
               right: '10px',
               fontWeight: 400,
               fontSize: '0.75rem',
-              color: 'var(--component-input-text)',
+              color: 'var(--yoroi-comp-input-text)',
             }}
           >
             {intl.formatMessage(messages.feesLabel, { amount: fees })}
@@ -499,7 +499,7 @@ class AmountInput extends Component<AmountInputProps> {
             position: 'absolute',
             bottom: '45px',
             right: error != null && error !== '' ? '45px' : '10px',
-            color: 'var(--component-input-text)',
+            color: 'var(--yoroi-comp-input-text)',
             textTransform: 'uppercase',
           }}
         >

diff --git a/packages/yoroi-extension/app/components/layout/BackgroundColoredLayout.scss b/packages/yoroi-extension/app/components/layout/BackgroundColoredLayout.scss
@@ -2,5 +2,5 @@
   overflow: overlay;
   height: 100%;
   padding: 30px;
-  background-color: var(--th-palette-gray-50);
+  background-color: var(--yoroi-palette-gray-50);
 }
diff --git a/packages/yoroi-extension/app/components/layout/CenteredLayout.scss b/packages/yoroi-extension/app/components/layout/CenteredLayout.scss
@@ -1,6 +1,6 @@
 .component {
   align-items: center;
-  background-color: var(--theme-loading-background-color);
+  background-color: var(--yoroi-loading-background-color);
   display: flex;
   height: 100%;
   justify-content: space-between;

diff --git a/packages/yoroi-extension/app/components/layout/TopBarLayout.scss b/packages/yoroi-extension/app/components/layout/TopBarLayout.scss
@@ -1,5 +1,5 @@
 .component {
-  background-color: var(--th-palette-common-white);
+  background-color: var(--yoroi-palette-common-white);
   box-shadow: 0 0 70px 0 rgba(0, 0, 0, 0.75);
   display: flex;
   flex-direction: column;
@@ -35,7 +35,7 @@
 }
 
 .containerMain {
-  background-color: var(--th-palette-gray-50);
+  background-color: var(--yoroi-palette-gray-50);
 }
 
 .inner {
@@ -50,7 +50,7 @@
 
 .containerInner {
   margin-top: 4px;
-  background-color: var(--th-palette-common-white);
+  background-color: var(--yoroi-palette-common-white);
   width: 100%;
   overflow: hidden;
   display: flex;

diff --git a/packages/yoroi-extension/app/components/loading/Crashed.scss b/packages/yoroi-extension/app/components/loading/Crashed.scss
@@ -5,15 +5,15 @@
   padding-right: 40px;
 
   .attention {
-    color: var(--th-palette-gray-900);
+    color: var(--yoroi-palette-gray-900);
     font-weight: 500;
     font-size: 16px;
     line-height: 19px;
     text-align: center;
   }
 
   .explanation {
-    color: var(--th-palette-gray-900);
+    color: var(--yoroi-palette-gray-900);
     font-weight: 400;
     font-size: 14px;
     line-height: 22px;

diff --git a/packages/yoroi-extension/app/components/loading/Loading.scss b/packages/yoroi-extension/app/components/loading/Loading.scss
@@ -33,7 +33,7 @@
     width: 100px;
     margin: 0 114px;
     & > path {
-      fill: var(--th-palette-secondary-300);
+      fill: var(--yoroi-palette-secondary-300);
     }
   }
 }
@@ -61,8 +61,8 @@
 }
 
 .link {
-  color: var(--th-palette-error-200);
-  @include underline(var(--th-palette-error-200));
+  color: var(--yoroi-palette-error-200);
+  @include underline(var(--yoroi-palette-error-200));
 }
 
 .error {

diff --git a/packages/yoroi-extension/app/components/loading/Maintenance.scss b/packages/yoroi-extension/app/components/loading/Maintenance.scss
@@ -5,15 +5,15 @@
   padding-right: 40px;
 
   .attention {
-    color: var(--th-palette-gray-900);
+    color: var(--yoroi-palette-gray-900);
     font-weight: 500;
     font-size: 16px;
     line-height: 19px;
     text-align: center;
   }
 
   .explanation {
-    color: var(--th-palette-gray-900);
+    color: var(--yoroi-palette-gray-900);
     font-weight: 400;
     font-size: 14px;
     line-height: 22px;
@@ -27,7 +27,7 @@
     width: fit-content;
 
     a {
-      color: var(--th-palette-gray-800);
+      color: var(--yoroi-palette-gray-800);
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;
@@ -42,7 +42,7 @@
     }
 
     &:hover {
-      @include underline(var(--th-palette-gray-800));
+      @include underline(var(--yoroi-palette-gray-800));
     }
   }
 }
diff --git a/packages/yoroi-extension/app/components/mixins/HeaderBlock.scss b/packages/yoroi-extension/app/components/mixins/HeaderBlock.scss
@@ -1,7 +1,7 @@
 @mixin headerBlockBase {
   font-size: 14px;
   line-height: 22px;
-  color: var(--theme-instructions-recovery-text-color);
+  color: var(--yoroi-instructions-recovery-text-color);
   margin: 10px 0 14px 0;
   letter-spacing: 0;
 }

diff --git a/packages/yoroi-extension/app/components/mixins/card-mixin.scss b/packages/yoroi-extension/app/components/mixins/card-mixin.scss
@@ -2,8 +2,8 @@
   width: 250px;
   height: 380px;
   border-radius: 8px;
-  background-color: var(--th-palette-common-white);
-  color: var(--th-palette-gray-800);
+  background-color: var(--yoroi-palette-common-white);
+  color: var(--yoroi-palette-gray-800);
   font-size: 1rem;
   font-weight: 400;
   padding: 32px 20px;
@@ -20,7 +20,7 @@
     box-shadow: 0 5px 30px 0px rgba(24, 26, 30, 0.12);
 
     .heroCardsItemTitle {
-      color: var(--th-palette-primary-300);
+      color: var(--yoroi-palette-primary-300);
     }
   }
 

diff --git a/packages/yoroi-extension/app/components/notice-board/NoNotice.scss b/packages/yoroi-extension/app/components/notice-board/NoNotice.scss
@@ -13,7 +13,7 @@
     align-items: center;
     font-size: 16px;
     line-height: 22px;
-    color: var(--th-palette-gray-800);
+    color: var(--yoroi-palette-gray-800);
     .notDelegatedYet {
       margin-bottom: 12px;
     }

diff --git a/packages/yoroi-extension/app/components/notice-board/NoticeBlock.scss b/packages/yoroi-extension/app/components/notice-board/NoticeBlock.scss
@@ -20,27 +20,27 @@
           flex-grow: 1;
           font-size: 18px;
           font-weight: 600;
-          color: var(--th-palette-gray-800);
+          color: var(--yoroi-palette-gray-800);
         }
         .time {
           min-width: 160px;
           display: flex;
           justify-content: flex-end;
           font-size: 12px;
-          color: var(--th-palette-gray-400);
+          color: var(--yoroi-palette-gray-400);
         }
       }
       .secondRow {
         margin-top: 5px;
         font-size: 14px;
         line-height: 18px;
-        color: var(--th-palette-gray-800);
+        color: var(--yoroi-palette-gray-800);
       }
     }
   }
   .line {
     height: 1px;
     opacity: 0.3;
-    background-color: var(--th-palette-gray-400);
+    background-color: var(--yoroi-palette-gray-400);
   }
 }
diff --git a/packages/yoroi-extension/app/components/notice-board/NoticeBoard.scss b/packages/yoroi-extension/app/components/notice-board/NoticeBoard.scss
@@ -12,7 +12,7 @@
         font-weight: 400;
         font-size: 16px;
         line-height: 21px;
-        color: var(--th-palette-gray-900);
+        color: var(--yoroi-palette-gray-900);
       }
     }
   }

diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.scss
@@ -6,7 +6,7 @@
   margin: 0 auto;
   margin-top: 65px;
   .header {
-    color: var(--th-palette-gray-600);
+    color: var(--yoroi-palette-gray-600);
     text-align: center;
     margin-bottom: 50px;
     font-size: 1.125rem;
@@ -15,7 +15,7 @@
     line-height: 1.375rem;
   }
   .description {
-    color: var(--th-palette-gray-600);
+    color: var(--yoroi-palette-gray-600);
     font-size: 1rem;
     line-height: 1.375rem;
     text-align: center;
@@ -26,7 +26,7 @@
     margin: 1rem 0;
 
     span {
-      color: var(--component-button-secondary-text);
+      color: var(--yoroi-comp-button-secondary-text);
       font-weight: bold;
       text-transform: uppercase;
     }
@@ -62,7 +62,7 @@
     }
     .cardContent {
       padding: 24px;
-      color: var(--th-palette-gray-900);
+      color: var(--yoroi-palette-gray-900);
       display: flex;
       flex-direction: column;
       justify-content: space-between;

diff --git a/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.scss b/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.scss
@@ -18,7 +18,7 @@
   }
 
   .mainTitle {
-    color: var(--th-palette-gray-800);
+    color: var(--yoroi-palette-gray-800);
     font-size: 26px;
     margin-top: 156px - (64px + 60px);
   }

diff --git a/...ages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.scss b/...ages/yoroi-extension/app/components/profile/language-selection/LanguageSelectionForm.scss
@@ -19,15 +19,15 @@
 }
 
 .info {
-  color: var(--theme-terms-of-use-text-color);
+  color: var(--yoroi-terms-of-use-text-color);
   text-align: justify;
   margin-top: 30px;
-  background-color: var(--th-palette-common-white);
+  background-color: var(--yoroi-palette-common-white);
   border-radius: 8px;
   padding: 16px;
 
   h1 {
-    color: var(--th-palette-gray-800);
+    color: var(--yoroi-palette-gray-800);
     font-weight: 500;
     font-size: 14px;
     margin-bottom: 11px;

diff --git a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.scss
@@ -22,7 +22,7 @@
   }
 
   .content {
-    color: var(--th-palette-gray-800);
+    color: var(--yoroi-palette-gray-800);
     font-weight: 400;
     font-size: 14px;
     line-height: 24px;

diff --git a/packages/yoroi-extension/app/components/profile/terms-of-use/PrivacyPolicy.scss b/packages/yoroi-extension/app/components/profile/terms-of-use/PrivacyPolicy.scss
@@ -2,7 +2,7 @@
 
 .component {
   .text {
-    color: var(--theme-support-settings-text);
+    color: var(--yoroi-support-settings-text);
     font-weight: 400;
     font-size: 14px;
     line-height: 24px;

diff --git a/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss b/packages/yoroi-extension/app/components/profile/terms-of-use/TermsOfUseText.scss
@@ -38,7 +38,7 @@
 }
 
 :global(.YoroiClassic) .terms {
-  color: var(--theme-terms-of-use-text-color);
+  color: var(--yoroi-terms-of-use-text-color);
 }
 
 :global(.YoroiModern) .terms {
@@ -55,7 +55,7 @@
   }
 
   p, li {
-    color: var(--theme-terms-of-use-text-color);
+    color: var(--yoroi-terms-of-use-text-color);
     font-size: 13px;
     line-height: 1.54;
   }