fix: [App Separation] - Spike: Reduce style TODOs

src/components/contract-result-overlay/contract-result-overlay.scss

@@ -48,15 +48,15 @@
     }
 
     &--won {
-        background-image: $COLOR_LIGHT_GREEN_GRADIENT; // TODO: Update when gradients are added.
+        background-image: $COLOR_LIGHT_GREEN_GRADIENT;
 
         > #{$contract_result}-caption {
             color: var(--text-profit-success);
         }
     }
 
     &--lost {
-        background-image: $COLOR_LIGHT_RED_GRADIENT; // TODO: Update when gradients are added.
+        background-image: $COLOR_LIGHT_RED_GRADIENT;
 
         > #{$contract_result}-caption {
             color: var(--text-loss-danger);

src/components/run-panel/run-panel.scss

@@ -3,7 +3,6 @@
 /**
 * @define -panel
 **/
-// TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat)
 .run-panel {
     height: 0;
 
@@ -110,8 +109,6 @@
 
         &-button {
             width: 318px;
-
-            // TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat)
             height: 32px !important;
             margin: 12px 24px;
         }
@@ -256,7 +253,6 @@
         right: -0.2rem;
     }
 
-    // TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat)
     &__dialog {
         max-height: 500px !important;
         width: 460px;

src/components/shared/styles/_themes.scss

@@ -171,7 +171,6 @@
         --transparent-correct-message: #{constants.$color-green-5};
         --transparent-fake-message: #{constants.$color-red-6};
 
-        /* TODO: change to styleguide later */
         // Gradient
         --gradient-success: #{constants.$gradient-color-green-1};
         --gradient-danger: #{constants.$gradient-color-red-1};
@@ -208,8 +207,6 @@
         --general-section-1: #{constants.$color-black-3};
         --general-section-2: #{constants.$color-black};
         --general-section-3: #{constants.$color-black-5};
-
-        // @TODO: get color from design
         --general-section-4: #{constants.$color-black-5};
         --general-section-5: #{constants.$color-black-5};
         --general-section-6: #{constants.$color-grey-7};
@@ -315,7 +312,6 @@
         --transparent-correct-message: #{constants.$color-green-5};
         --transparent-fake-message: #{constants.$color-red-6};
 
-        /* TODO: change to styleguide later */
         // Gradient
         --gradient-success: #{constants.$gradient-color-green-2};
         --gradient-danger: #{constants.$gradient-color-red-2};

src/components/shared_ui/autocomplete/autocomplete.scss

@@ -1,5 +1,4 @@
 // Colors used here are borrowed from input.scss
-// TODO: use-phase-2-colors - Switch to using phase 2 colors, following the new color palette (refer Abstract)
 
 .dc-autocomplete {
     width: 100%;

src/components/shared_ui/button/button.scss

@@ -206,7 +206,6 @@
         }
     }
 
-    /* TODO: confirm this button with designer are we still using this? */
     &--green {
         background: var(--status-success);
 
@@ -303,8 +302,6 @@
         border-radius: 0 4px 4px 0;
     }
 
-    /* TODO: confirm this button with designer are we still using this? */
-
     /* postcss-bem-linter: ignore */
     .initial-loader--btn {
         background-color: unset;

src/components/shared_ui/drawer/drawer.scss

@@ -1,7 +1,6 @@
 @use 'components/shared/styles/devices' as *;
 
 /** @define dc-drawer */
-// TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat)
 .dc-drawer {
     $toggler-width: 16px;
 

src/components/shared_ui/input-field/input-field.scss

@@ -81,11 +81,6 @@ button.dc-input-wrapper {
         }
     }
 
-    &__icon {
-        // TODO: fix check if necessary
-        // @extend %inline-icon;
-    }
-
     &--disabled {
         pointer-events: none;
         color: var(--text-disabled);

src/components/shared_ui/input/input.scss

@@ -49,7 +49,7 @@
     }
 
     &--error {
-        @media (width <= 992px) {
+        @media (width <=992px) {
             margin-bottom: 5rem;
         }
 
@@ -127,9 +127,15 @@
         }
 
         &:disabled {
-            -webkit-text-fill-color: var(--text-less-prominent); // iOS
-            opacity: 1; // iOS
             color: var(--text-less-prominent);
+            opacity: 1;
+
+            @supports (-webkit-appearance: none) {
+                --input-disabled-color: var(--text-less-prominent);
+
+                color: var(--input-disabled-color);
+                -webkit-text-fill-color: var(--input-disabled-color);
+            }
 
             & ~ label {
                 color: var(--text-less-prominent) !important;
@@ -140,15 +146,6 @@
                     fill: var(--text-less-prominent);
                 }
             }
-
-            // TODO: Ugly safari override hack, find better way to override shadow dom generated by Safari
-            /* stylelint-disable */
-            @media not all and (min-resolution: 0.001dpcm) {
-                @supports (-webkit-appearance: none) {
-                    color: var(--text-prominent);
-                }
-            }
-            /* stylelint-enable */
         }
 
         &:focus {

src/components/trade-animation/trade-animation.scss

@@ -75,7 +75,6 @@
         border-bottom-right-radius: $BORDER_RADIUS;
     }
 
-    // TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat)
     &__run-button {
         width: fit-content;
         height: 100% !important;

src/pages/dashboard/bot-list/save-modal/save-modal.scss

@@ -36,7 +36,6 @@
     }
 }
 
-// TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat)
 div.radio-group {
     &__save-type {
         display: flex;
@@ -89,7 +88,6 @@ div.radio-group {
     }
 
     &__input {
-        // TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat)
         margin: 2rem 0 0 !important;
     }
 

src/pages/dashboard/dashboard.scss

@@ -1,6 +1,10 @@
 @use 'components/shared/styles/mixins' as *;
 
 .bot-dashboard {
+    --translate-panel-rtl: -367px;
+    --translate-panel-ltr: 367px;
+    --translate-panel-reset: 0px;
+
     position: relative;
     height: calc(100vh - 8.4rem);
     overflow: hidden;
@@ -16,18 +20,16 @@
     .run-panel__container {
         height: var(--tab-content-height) !important;
         position: sticky;
-
-        // TODO: need to set global variables for translation
-        transform: translateX(calc(367px));
+        transform: translateX(var(--translate-panel-ltr));
         transition: all 0.4s;
         margin-top: 1rem;
 
         @include is-RTL {
-            transform: translateX(calc(-367px));
+            transform: translateX(var(--translate-panel-rtl));
         }
 
         &--tour-active {
-            transform: translateX(calc(0px)) !important;
+            transform: translateX(var(--translate-panel-reset)) !important;
 
             .dc-drawer__toggle-icon--right {
                 transform: rotate(180deg) !important;
@@ -45,7 +47,7 @@
 
     .dc-drawer--open {
         @include desktop-screen {
-            transform: translateX(calc(0px)) !important;
+            transform: translateX(var(--translate-panel-reset)) !important;
         }
 
         @include mobile-or-tablet-screen {