@eturnity/eturnity_reusable_components 7.51.16-EPDM-13568.2 → 7.51.16-EPDM-13568.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.16-EPDM-13568.2",
+  "version": "7.51.16-EPDM-13568.4",
   "files": [
     "dist",
     "src"

package/src/components/buttons/mainButton/index.vue

@@ -2,6 +2,7 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
+      :app-theme="appTheme"
       :button-size="buttonSize"
       :custom-color="customColor"
       :data-id="dataId"
@@ -11,7 +12,6 @@
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
-      :theme-type="theme"
       :type="type"
       :variant="variant"
     >
@@ -51,7 +51,7 @@
     height: String,
     variant: String,
     buttonSize: String,
-    themeType: String,
+    appTheme: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
@@ -62,24 +62,24 @@
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
     color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.textColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .textColor};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.backgroundColor
         : props.customColor
         ? props.customColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default};
 
     border: ${(props) => {
       const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.borderColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .borderColor
       return borderValue ? '1px solid ' + borderValue : 'none'
     }};
@@ -94,18 +94,18 @@
     &:hover {
       background-color: ${(props) =>
         props.isDisabled
-          ? props.theme.mainButton[props.themeType][props.type][props.variant]
+          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
               .disabled.backgroundColor
-          : props.theme.mainButton[props.themeType][props.type][props.variant]
+          : props.theme.mainButton[props.appTheme][props.type][props.variant]
               .hover};
     }
 
     &:active {
       background-color: ${(props) =>
         props.isDisabled
-          ? props.theme.mainButton[props.themeType][props.type][props.variant]
+          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
               .disabled.backgroundColor
-          : props.theme.mainButton[props.themeType][props.type][props.variant]
+          : props.theme.mainButton[props.appTheme][props.type][props.variant]
               .active};
     }
   `
@@ -197,7 +197,7 @@
         type: String,
         default: '',
       },
-      theme: {
+      appTheme: {
         type: String,
         default: 'light',
       },

package/src/components/tableDropdown/index.vue

@@ -25,18 +25,19 @@
                 item.type === 'template')
             "
           />
-          <TemplateButton
+          <MainButton
             v-if="
               item.type &&
               item.type === 'template' &&
               (item.value === '' || item.value === '-')
             "
             :key="index + '_button'"
-            :show-archived="showArchived"
+            button-size="small"
+            :text="$gettext('Use template...')"
+            :type="primary"
+            :variant="showArchived ? 'cancel' : 'main'"
             @click.stop="onTemplateClick(item.row)"
-          >
-            {{ $gettext('Use template...') }}
-          </TemplateButton>
+          />
           <TemplateLink
             v-else-if="
               item.type && item.type === 'template' && item.value !== ''
@@ -137,12 +138,13 @@
                 <span v-if="option !== 'template'">
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
-                <TemplateButton
+                <MainButton
                   v-else-if="option === 'template' && item.has_template"
+                  button-size="small"
+                  :text="$gettext('Use template...')"
+                  :type="primary"
                   @click.stop="onTemplateClick(item)"
-                >
-                  {{ $gettext('Use template...') }}
-                </TemplateButton>
+                />
                 <NoTemplate
                   v-else-if="option === 'template' && !item.has_template"
                 >
@@ -196,6 +198,7 @@
   import Icon from '../icon'
   import theme from '@/assets/theme.js'
   import InfoText from '../infoText'
+  import MainButton from '../buttons/mainButton'
 
   const rowAttrs = { disabled: Boolean, isOpen: Boolean }
   const DropdownRow = styled('div', rowAttrs)`
@@ -354,17 +357,6 @@
   `
 
   const templateAttrs = { showArchived: Boolean }
-  const TemplateButton = styled('div', templateAttrs)`
-    cursor: pointer;
-    background-color: #263238;
-    color: ${(props) =>
-      props.showArchived ? props.theme.colors.red : props.theme.colors.white};
-    padding: 4px 10px;
-    display: inline-block;
-    border-radius: 4px;
-    text-align: center;
-    margin-left: 15px;
-  `
 
   const NoTemplate = styled('div', templateAttrs)`
     color: ${(props) =>
@@ -458,7 +450,7 @@
       OptionsWrapper,
       OptionsItem,
       SearchContainer,
-      TemplateButton,
+      MainButton,
       NoTemplate,
       TemplateLink,
       InputText,