@capillarytech/creatives-library 1.0.1-alpha.0 → 1.0.2

package/components/organisms/TierUpgradeAndDowngrade/style.js

@@ -4,32 +4,19 @@ import { SLIDE_BOX_CONTENT_WIDTH } from '../../pages/App/constants';
 
 const {
   CAP_SPACE_24,
+  CAP_SPACE_28,
   CAP_SPACE_20,
   CAP_SPACE_04,
   CAP_SPACE_08,
   CAP_SPACE_12,
   CAP_SPACE_16,
-  CAP_SPACE_28,
   CAP_SPACE_32,
   CAP_SPACE_40,
   CAP_SPACE_52,
   CAP_G04,
-  CAP_G05,
   FONT_SIZE_M,
   FONT_COLOR_04,
-  FONT_COLOR_02,
-  FONT_COLOR_03,
   CAP_G07,
-  CAP_WHITE,
-  CAP_PINK,
-  CAP_RED,
-  CAP_G06,
-  CAP_COLOR_04,
-  FONT_WEIGHT_MEDIUM,
-  FONT_WEIGHT_REGULAR,
-  CAP_SPACE_36,
-  CAP_G01,
-  FONT_SIZE_S,
 } = StyledVars;
 
 export default css`
@@ -55,7 +42,6 @@ export default css`
   }
   .component-with-label-label {
     font-size: ${FONT_SIZE_M};
-    /* font-weight: ${FONT_WEIGHT_MEDIUM} !important; */
   }
   .downgrade-checkbox {
     margin-bottom: ${CAP_SPACE_16};
@@ -99,18 +85,14 @@ export default css`
   }
   .tier-upgrade-info {
     margin-top: ${CAP_SPACE_24};
-    margin-bottom: ${CAP_SPACE_08};
-    font-size: 1rem;
-    font-weight: ${FONT_WEIGHT_MEDIUM};
   }
   .extension-selection {
-    margin-bottom: -1rem;
-    margin-top: 0.714rem;
+    margin-bottom: ${CAP_SPACE_28};
+    margin-top: ${CAP_SPACE_24};
 
     .fixed-date-container {
       width: 166px;
-      margin-top: 1.786rem;
-      margin-left: ${CAP_SPACE_16};
+      margin-top: ${CAP_SPACE_52};
 
       .ant-calendar-picker {
         cursor: unset;
@@ -133,23 +115,18 @@ export default css`
       }
     }
   }
-  .close-additional-condition {
-    margin-top: 2.8rem;
-    margin-right: ${CAP_SPACE_24};
+  .validity-tier {
+    margin: ${CAP_SPACE_24} 0;
   }
-  .close-additional-condition-hidden {
-    margin-top: ${CAP_SPACE_36};
-    margin-right: ${CAP_SPACE_24};
+  .close-additional-condition {
+    margin-top: ${CAP_SPACE_32};
   }
   .ant-divider-horizontal.ant-divider-with-text-left::before {
     width: 0;
   }
   .eligibilty-tracker > *,
   .eligibilty-condition > * {
-    margin-top: ${CAP_SPACE_12};
-    .component-with-label-label {
-      margin-bottom: ${CAP_SPACE_04};
-    }
+    margin-right: ${CAP_SPACE_16};
   }
   .eligibilty-tracker-condition,
   .adv-downgrade-label,
@@ -159,120 +136,21 @@ export default css`
   .validity-switch {
     margin-top: ${CAP_SPACE_24};
   }
-  .renewal-title-disable-state,
-  .validity-title-disable-state {
-    .component-with-label-label {
-      color: ${CAP_G01} !important;
-    }
-  }
   .section-eligibility-header {
-    margin: ${CAP_SPACE_32} 0 ${CAP_SPACE_16};
-    .cap-header-v2-title {
-      font-size: ${CAP_SPACE_20};
-    }
-    .cap-header-v2-description {
-      color: ${FONT_COLOR_03};
-    }
-  }
-
-  .tiers-create-parent-container {
-    border-left: 0.072rem solid #dfe2e7;
-    margin-top: 4rem;
-    width: 100%;
-    padding: ${CAP_SPACE_20} ${CAP_SPACE_24} ${CAP_SPACE_08} ${CAP_SPACE_24};
-
-    .component-with-label-label {
-      font-weight: ${FONT_WEIGHT_REGULAR};
-    }
-  }
-  .tiers-create-parent-container-edit-mode {
-    width: 70rem;
-    border-left: 0.075rem solid #dfe2e7;
-    margin-top: 4rem;
-    padding: ${CAP_SPACE_20} ${CAP_SPACE_24} ${CAP_SPACE_08} ${CAP_SPACE_24};
-
-
-  .eligibilty-tracker > *,
-  .eligibilty-condition > * {
-    margin-right: ${CAP_SPACE_32};
-  }
-    .flex-gap-12 {
-      gap: ${CAP_SPACE_32};
-    }
-  //setting max-width to prevent overflow
-  .eligibility-tag.tracker-id-dd .ant-select-selection-selected-value,
-  .eligibility-tag.tracker-cond-id-dd .ant-select-selection-selected-value {
-    max-width: 12.857rem;
-  }
-  .eligibility-tag.upgrade-mode-dd .ant-select-selection-selected-value {
-    max-width: 19rem;
-  }
-  .eligibility-tag {
-    cursor: unset !important;
-    .ant-select-selection {
-      border-radius: 1.142rem;
-      background: #EBECF0 !important;
-      height: ${CAP_SPACE_32};
-      border-color: #EBECF0!important ;
-      margin-top: 0.286rem;
-      cursor: unset;
-      width:fit-content;
-    }
-    .ant-select-selection__rendered {
-      line-height: ${CAP_SPACE_32};
-    }
-    .component-with-label-label,
-    .ant-select-disabled {
-      width: max-content !important;
-      color: ${CAP_G01};
-    }
-    .ant-select-selection-selected-value .tooltip-criteria-selected-value{
-      color: ${CAP_G01} !important;
-      margin: 0.429rem 0;
-      width: fit-content;
-    }
-    .ant-select-selection-selected-value {
-      width: max-content;
-      text-overflow: ellipsis;
-    }
-    .cap-tooltip-with-info {
-        color: ${CAP_G01} !important;
-    }
-  }
-
-    .component-with-label-label {
-      font-weight: ${FONT_WEIGHT_REGULAR};
-    }
-  }
-  .tracker-condition-block-container {
-    margin-top: 2.143rem;
-    .ant-divider-horizontal.ant-divider-with-text-left::before {
-      padding-left: ${CAP_SPACE_20};
-    }
-    .ant-divider-horizontal.ant-divider-with-text-left .ant-divider-inner-text {
-      padding: 0 ${CAP_SPACE_08};
-    }
-    .ant-divider-horizontal {
-      margin: ${CAP_SPACE_16} 0 !important;
-      line-height: ${CAP_SPACE_16};
-    }
-  }
-  .tracker-condition-block-single-mode {
-    margin-top: unset;
+    margin: ${CAP_SPACE_24} 0;
   }
 
   .add-secondary-criteria-label {
-    margin: ${CAP_SPACE_08} 0 0;
-    padding: 0.714rem 0;
-    line-height: ${CAP_SPACE_20};
-    font-size: ${FONT_SIZE_M};
-    font-weight: ${FONT_WEIGHT_MEDIUM};
-
+    margin: ${CAP_SPACE_16} 0;
+    padding: 0;
 
     .ant-anchor-link {
       text-align: start;
     }
   }
+  .add-tier-slider-container {
+    width: ${SLIDE_BOX_CONTENT_WIDTH};
+  }
   .upgrade-value-input {
     align-self: flex-end;
   }
@@ -286,424 +164,4 @@ export default css`
     position: relative;
     left: -40px;
   }
-  .validity-downgrade-switch {
-    margin-top: ${CAP_SPACE_16};
-    .component-with-label-inductive-text {
-      width: 49rem !important;
-    }
-  }
-  .validity-container {
-    margin-top: ${CAP_SPACE_08};
-    .component-with-label-inductive-text {
-      width: 49rem !important;
-    }
-    .component-with-label-label {
-      font-size: ${CAP_SPACE_20};
-      font-weight: ${FONT_WEIGHT_MEDIUM};
-      line-height: ${CAP_SPACE_28};
-      margin-bottom: 0.143rem;
-    }
-  }
-  .eligibility-condition-disabled {
-    .ant-select-selection-selected-value .tooltip-criteria-selected-value {
-      color: ${CAP_G06} !important;
-    }
-  }
-  .new-tag {
-    background-color: ${CAP_PINK} !important;
-    width: 2.125rem;
-    height: ${CAP_SPACE_16} !important;
-    color: ${CAP_WHITE};
-    font-size: 0.625rem;
-    font-weight: 700;
-  }
-  .default-condition {
-    .ant-select-selection {
-      margin-top: 0.571rem !important;
-    }
-  }
-  .default-tracker-condition {
-    margin-bottom: 0px;
-  }
-  .extended-section-tooltip {
-    display: flex;
-    justify-content: flex-start;
-    .ant-tooltip-inner {
-      width: 30.5rem;
-      white-space: normal;
-    }
-    .extended-section-container {
-      padding: ${CAP_SPACE_12} ${CAP_SPACE_20};
-      .editTier-tooltip-content {
-        font-weight: ${FONT_WEIGHT_MEDIUM};
-        font-size: 1rem;
-      }
-      .tooltip-anchor {
-        margin-top: ${CAP_SPACE_08};
-        .ant-anchor-link-title {
-          font-size: ${CAP_SPACE_12} !important;
-          display: flex;
-        }
-        .go-to-advance-settings {
-          font-size: ${CAP_SPACE_12};
-          margin-right: 0.143rem;
-          margin-top: 0.071rem;
-        }
-        .go-to-advance-settings-text {
-          font-size: ${CAP_SPACE_12};
-          font-weight: ${FONT_WEIGHT_MEDIUM};
-        }
-      }
-    }
-    .cap-date-picker-common-v2 {
-      .ant-calendar-picker {
-        border-radius: ${CAP_SPACE_04};
-        border: 0.071rem solid ${CAP_G07};
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: ${CAP_SPACE_40};
-        width: 14.571rem;
-        .ant-calendar-picker-input {
-          height: ${CAP_SPACE_36} !important;
-          width: 13.929rem;
-          border: none !important;
-        }
-        .ant-calendar-picker-icon {
-          margin-right: ${CAP_SPACE_08};
-        }
-      }
-    }
-    .ant-calendar-year-select {
-      cursor: not-allowed !important;
-      pointer-events: none !important;
-      color: gray !important;
-    }
-    .ant-calendar-month-panel-year-select {
-      cursor: not-allowed !important;
-      pointer-events: none !important;
-      color: gray !important;
-    }
-  }
-  .advanced-settings-title {
-    font-size: ${CAP_SPACE_20};
-  }
-  .eligibility-settings-desc {
-    margin-top: ${CAP_SPACE_08};
-  }
-  .tier-upgrade-info-container {
-    .validity-period {
-      margin-top: -${CAP_SPACE_12};
-      .ant-select-selection {
-        width: 25.714rem;
-      }
-    }
-    .till-fixed-date-container {
-      margin-left: ${CAP_SPACE_16};
-      .cap-date-picker-common-v2 {
-        .ant-calendar-picker {
-          border-radius: ${CAP_SPACE_04};
-          border: 0.071rem solid ${CAP_G07};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: ${CAP_SPACE_40};
-          width: 14.571rem;
-          .ant-calendar-picker-input {
-            width: 13.929rem;
-            border: none !important;
-          }
-          .ant-calendar-picker-icon {
-            margin-right: ${CAP_SPACE_08};
-          }
-        }
-      }
-      .ant-calendar-year-select {
-        cursor: not-allowed !important;
-        pointer-events: none !important;
-        color: gray !important;
-      }
-      .ant-calendar-month-panel-year-select {
-        cursor: not-allowed !important;
-        pointer-events: none !important;
-        color: gray !important;
-      }
-    }
-    .ant-tooltip-inner {
-      width: 30.5rem;
-      white-space: normal;
-    }
-    .extended-section-container {
-      padding: ${CAP_SPACE_12} ${CAP_SPACE_20};
-      .editTier-tooltip-content {
-        font-weight: ${FONT_WEIGHT_MEDIUM};
-        font-size: 1rem;
-      }
-      .tooltip-anchor {
-        margin-top: ${CAP_SPACE_08};
-        .ant-anchor-link-title {
-          font-size: ${CAP_SPACE_12} !important;
-          display: flex;
-        }
-        .go-to-advance-settings {
-          font-size: ${CAP_SPACE_12};
-          margin-right: 0.143rem;
-          margin-top: 0.071rem;
-        }
-        .go-to-advance-settings-text {
-          font-size: ${CAP_SPACE_12};
-          font-weight: ${FONT_WEIGHT_MEDIUM};
-        }
-      }
-    }
-    .ant-calendar-prev-year-btn,
-    .ant-calendar-next-year-btn,
-    .ant-calendar-year-select,
-    .ant-calendar-month-panel-header,
-    .ant-calendar-table thead {
-      display: none;
-    }
-    .tier-info {
-      margin: ${CAP_SPACE_08} 0 ${CAP_SPACE_16} 0;
-    }
-  }
-  .validity-note {
-    width: 37rem;
-    margin: -${CAP_SPACE_24} 0px -${CAP_SPACE_04} 0px;
-    .tier-info {
-      margin: 1.751rem 0;
-      border-radius: ${CAP_SPACE_04};
-    }
-  }
-  .advance-minimum-duration-input {
-    width: 9.375rem;
-    .ant-input-suffix {
-      color: ${FONT_COLOR_04};
-    }
-  }
-  .advance-minimum-check {
-    display: flex;
-    align-items: center;
-    margin-top: ${CAP_SPACE_12};
-    .ant-tooltip-inner {
-      width: 31rem;
-      white-space: normal;
-      padding: ${CAP_SPACE_12} ${CAP_SPACE_20} ${CAP_SPACE_12} ${CAP_SPACE_20};
-    }
-    .advance-minimum-duration-tooltip {
-      .ant-tooltip-inner {
-        width: 29rem;
-        margin-left: -${CAP_SPACE_40};
-      }
-    }
-    .minimun-duration-info-icon {
-      color: ${CAP_G06};
-    }
-    .title {
-      font-weight: ${FONT_WEIGHT_REGULAR};
-    }
-  }
-
-  .minimum-duration-input {
-    margin-left: auto;
-  }
-  .minimum-duration-example {
-    font-size: ${CAP_SPACE_12};
-    font-weight: ${FONT_WEIGHT_REGULAR};
-    margin-top: ${CAP_SPACE_08};
-  }
-  .minimum-duration-example-note {
-    font-size: ${CAP_SPACE_12};
-    font-weight: ${FONT_WEIGHT_REGULAR};
-  }
-
-  .validity-period-modal {
-    max-width: unset !important;
-    width: 33rem !important;
-    height: 14.5rem;
-    .ant-modal-content {
-      height: inherit;
-      display: flex;
-      align-items: center;
-      .validity-modal-content-container {
-        width: 100%;
-        .validity-modal-note-container {
-          margin-left: ${CAP_SPACE_24};
-          .validity-period-modal-title {
-            margin-bottom: ${CAP_SPACE_08};
-          }
-          .validity-period-modal-description {
-            margin-bottom: ${CAP_SPACE_12};
-          }
-        }
-      }
-    }
-    .ant-modal-close-x {
-      display: none;
-    }
-  }
-  .tierUpgrade-block-inductive-text {
-    position: absolute;
-    top: 0;
-    transform: translateY(-50%);
-    left: 1.428rem;
-    background-color: ${CAP_WHITE};
-    padding: 0 0.285rem;
-  }
-  .tierUpgrade-text-flex-container {
-    align-items: center;
-    gap: ${CAP_SPACE_08};
-  }
-  .tierUpgrade-target-name {
-    font-weight: ${FONT_WEIGHT_MEDIUM};
-  }
-  .trackerUpgrade-block-inductive-text {
-    position: absolute;
-    top: 0;
-    transform: translateY(-50%);
-    left: 1.428rem;
-    background-color: ${CAP_WHITE};
-    padding: 0 0.285rem;
-  }
-  .trackerUpgrade-text-flex-container {
-    align-items: center;
-    gap: ${CAP_SPACE_08};
-  }
-  .trackerUpgrade-target-name {
-    font-weight: ${FONT_WEIGHT_MEDIUM};
-  }
-  .custom-criteria-input-margin {
-    width: 50rem;
-    .component-with-label-label {
-      font-weight: ${FONT_WEIGHT_MEDIUM};
-    }
-  }
-  .ruleset-parent-container {
-    display: flex;
-    align-items: center;
-    .error-message {
-      position: absolute;
-    }
-  }
-  .tick-icon-ruleset {
-    margin-top: 1.73rem;
-    margin-left: 1.216rem;
-  }
-  .tick-icon-ruleset.disabled {
-    background-color: ${CAP_WHITE} !important;
-  }
-
-  .close-icon-ruleset {
-    margin-top: 1.6rem;
-    margin-left: 0.715rem;
-  }
-  .tracker-default-condition {
-    margin-top: 0rem;
-    gap: ${CAP_SPACE_12};
-  }
-  .tracker-default-condition-custom-case {
-    margin-top: -1.2rem;
-    margin-left: 2.857rem;
-  }
-  .eligibilty-condition-edit-mode {
-    margin-left: -0.5rem;
-    top: 2.357rem;
-    left: ${CAP_SPACE_04};
-  }
-  .condition-id-default-tracker {
-    border-radius: 50%;
-    display: inline-flex;
-    min-width: ${CAP_SPACE_28};
-    min-height: ${CAP_SPACE_28};
-    max-width: ${CAP_SPACE_28};
-    max-height: ${CAP_SPACE_28};
-    background: ${CAP_G07};
-    font-size: ${FONT_SIZE_S};
-    justify-content: center;
-    align-items: center;
-  }
-  .default-condition-id-non-tracker {
-    top: 4.857rem !important;
-    background: #ebecf0;
-    width: 1.429rem;
-    border-radius: 0.929rem;
-    margin-left: 0.143rem;
-    padding-left: 0.366rem;
-    height: 1.429rem;
-  }
-  .condition-id {
-    border-radius: 50%;
-    display: inline-flex;
-    min-width: ${CAP_SPACE_28};
-    min-height: ${CAP_SPACE_28};
-    max-width: ${CAP_SPACE_28};
-    max-height: ${CAP_SPACE_28};
-    background: ${CAP_G07};
-    font-size: ${FONT_SIZE_S};
-    justify-content: center;
-    align-items: center;
-  }
-  .condition-id-default-non-tracker {
-    border-radius: 50%;
-    display: inline-flex;
-    min-width: ${CAP_SPACE_28};
-    min-height: ${CAP_SPACE_28};
-    max-width: ${CAP_SPACE_28};
-    max-height: ${CAP_SPACE_28};
-    background: ${CAP_G07};
-    font-size: ${FONT_SIZE_S};
-    justify-content: center;
-    align-items: center;
-    top: 2.714rem;
-  }
-  .condition-id-default-non-tracker-edit-mode {
-    border-radius: 50%;
-    display: inline-flex;
-    min-width: ${CAP_SPACE_28};
-    min-height: ${CAP_SPACE_28};
-    max-width: ${CAP_SPACE_28};
-    max-height: ${CAP_SPACE_28};
-    background: ${CAP_G07};
-    font-size: ${FONT_SIZE_S};
-    justify-content: center;
-    align-items: center;
-    top: 2.3rem;
-    left: 0.5rem;
-  }
-  .ant-select-open {
-    .cap-icon-v2-chevron-down {
-      rotate: 180deg;
-    }
-  }
-  .ambiguous-expression-note{
-    margin-top: ${CAP_SPACE_08} !important;
-    width: fit-content;
-    .note-message-container {
-      align-items: center;
-    }
-  }
-  .error-margin {
-    margin-bottom: 2rem;
-  }
-  .error-border {
-    .ant-input-lg {
-      border-color: ${CAP_RED} !important;
-    }
-  }
-
-  .show-placeholder {
-    .ant-select-selection__placeholder {
-      display: unset !important;
-      color: ${CAP_G05};
-    }
-  }
-
-  .upgrade-option-parent {
-    flex-wrap: nowrap;
-  }
-  .upgrade-option-label {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
 `;