custom color theme part 2

resources/js/components/Others/ActionButton.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="action-button">
-        <x-icon size="12" class="icon" v-if="icon === 'x'"></x-icon>
-        <edit-2-icon size="12" class="icon" v-if="icon === 'pencil-alt'"></edit-2-icon>
+        <x-icon size="12" class="icon text-theme" v-if="icon === 'x'" />
+        <edit-2-icon size="12" class="icon text-theme" v-if="icon === 'pencil-alt'" />
         <span class="label">
             <slot></slot>
         </span>
@@ -40,7 +40,7 @@
             margin-right: 2px;
 
             path, circle, line {
-                stroke: $theme;
+                color: inherit;
             }
         }
     }

resources/js/components/Others/EmojiPicker.vue

@@ -3,7 +3,7 @@
         <label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
 
         <!-- Selected Emoji input -->
-        <div @click.stop="openList" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
+        <div @click.stop="openList" class="select-input-wrapper focus-border-theme" :class="{'active-menu' : selectOpen}">
 
             <!-- If is emoji selected -->
             <div class="select-input" v-if="selectedEmoji && selectedEmoji !== 'default'">
@@ -266,7 +266,6 @@ export default {
     .emoji-input {
         width: 100%;
         border-radius: 8px;
-        padding: 4px;
         margin-bottom: 20px;
         background: $light_background;
         border: none;
@@ -354,8 +353,7 @@ export default {
     }
 
     &.active-menu {
-        border-color: $theme;
-        box-shadow: 0 0 7px rgba($theme, 0.3);
+        //box-shadow: 0 0 7px rgba($theme, 0.3);
 
         .row-icon {
             transform: rotate(180deg);

resources/js/components/Others/Forms/ImageInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="dropzone" :class="{ 'is-error': error }">
         <div v-if="imagePreview" @click="resetImage" class="reset-image">
-            <x-icon size="14" class="close-icon"></x-icon>
+            <x-icon size="14" class="close-icon text-theme" />
         </div>
 
         <input
@@ -18,7 +18,7 @@
         />
 
         <div class="dropzone-message" v-show="! isData">
-            <image-icon size="28" class="icon-upload"></image-icon>
+            <image-icon size="28" class="icon-upload text-theme"></image-icon>
             <span class="dropzone-title">
                 {{ $t('input_image.title') }}
             </span>
@@ -146,7 +146,7 @@
 
             .icon-upload {
                 rect, circle, polyline {
-                    stroke: $theme
+                    color: inherit
                 }
             }
 
@@ -195,7 +195,7 @@
 
                 .icon-upload {
                     path, polyline, line {
-                        stroke: $theme;
+                        color: inherit;
                     }
                 }
 

resources/js/components/Others/Forms/MultiEmailInput.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="wrapper">
         <label class="input-label">{{ label }}:</label>
-        <div class="input-wrapper" :class="{'is-error' : isError}" @click="$refs.input.focus()">
+        <div class="input-wrapper focus-within-border-theme" :class="{'is-error' : isError}" @click="$refs.input.focus()">
             <div class="email-list">
-                <div class="email-tag" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
-                    <span>{{ email }}</span>
+                <div class="email-tag bg-theme-100" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
+                    <span class="text-theme">{{ email }}</span>
                     <x-icon @click="removeEmail(email)" class="icon" size="14"/>
                 </div>
                 <input @keydown.delete=removeLastEmail($event) @keyup="handleEmail()" v-model="email" :size="inputSize" class="email-input" :placeholder="placeHolder" autocomplete="new-password" ref="input"/>
@@ -123,8 +123,8 @@ export default {
     }
 
     &:focus-within {
-        border: 1px solid $theme;
-        box-shadow: 0 1px 5px rgba($theme, 0.3);
+        //border: 1px solid $theme;
+        //box-shadow: 0 1px 5px rgba($theme, 0.3);
     }
 
     .email-list {
@@ -140,7 +140,6 @@ export default {
         white-space: nowrap;
         display: flex;
         padding: 5px 10px;
-        background: rgba($theme, .1);
         border-radius: 8px;
         margin-right: 5px;
         align-items: center;
@@ -151,7 +150,6 @@ export default {
         }
 
         span {
-            color: $theme;
             font-weight: 700;
             @include font-size(14);
         }

resources/js/components/Others/Forms/SelectBoxInput.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="select-box">
-        <div class="box-item"
-             :class="{'selected': item.value === input}"
+        <div class="box-item active-bg-theme-100 active-border-theme"
+             :class="{'active': item.value === input}"
              @click="getSelectedValue(item)"
              v-for="(item, i) in data" :key="i"
         >
-            <span class="box-value">{{ item.label }}</span>
+            <span class="box-value active-text-theme">{{ item.label }}</span>
         </div>
     </div>
 </template>
@@ -67,15 +67,6 @@
             .box-value {
                 @include font-size(15);
             }
-
-            &.selected {
-                background: rgba($theme, .1);
-                border-color: $theme;
-
-                .box-value {
-                    color: $theme;
-                }
-            }
         }
     }
 

resources/js/components/Others/Popup/PopupHeader.vue

@@ -1,14 +1,13 @@
 <template>
     <div class="popup-header">
         <div class="icon">
-            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon"></corner-down-right-icon>
-            <share-icon v-if="icon === 'share'" size="17" class="title-icon"></share-icon>
-            <!-- <link-icon v-if="icon === 'share'" size="17" class="title-icon"></link-icon> -->
-            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon"></edit2-icon>
+            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme" />
+            <share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme" />
+            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme" />
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
-            <x-icon @click="closePopup" size="22" class="close-icon"></x-icon>
+            <x-icon @click="closePopup" size="22" class="close-icon" />
         </div>
     </div>
 </template>
@@ -51,7 +50,7 @@
             line-height: 0;
 
             path, line, polyline, rect, circle {
-                stroke: $theme;
+                color: inherit;
             }
         }
 

resources/js/components/Others/RenameItem.vue

@@ -16,7 +16,7 @@
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('popup_rename.label') }}:</label>
                     <div class="input">
-                        <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
+                        <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme" :placeholder="$t('popup_rename.placeholder')">
                         <div @click="pickedItem.name = ''" class="close-icon-wrapper">
                             <x-icon class="close-icon" size="14" />
                         </div>
@@ -26,7 +26,9 @@
 
                 <SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" />
 
-                <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
+                <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">
+                    {{ moreOptionsTitle }}
+                </ActionButton>
             </ValidationObserver>
         </PopupContent>
 

resources/js/components/Others/ShareCreate.vue

@@ -9,7 +9,7 @@
             <!--Item Thumbnail-->
             <ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata" />
 
-            <!-- Infobox for successfull sended email -->
+            <!-- Infobox for successful send email -->
             <InfoBox v-if="isGeneratedShared && sharedViaEmail" class="info-box-wrapper">
                 <p v-html="$t('shared_form.email_successfully_send_message')"></p>
             </InfoBox>
@@ -31,7 +31,7 @@
 
                 </TabWrapper>
 
-                <!--Permision Select-->
+                <!--Permission Select-->
                 <ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
                     <SelectInput v-model="shareOptions.permission" :options="permissionOptions" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]" />
@@ -48,7 +48,7 @@
 
                 <!--Set password-->
                 <ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
-                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
@@ -62,7 +62,9 @@
                     </div>
                 </div>
 
-                <ActionButton @click.native="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
+                <ActionButton @click.native="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">
+                    {{ moreOptionsTitle }}
+                </ActionButton>
             </ValidationObserver>
 
             <!--Copy generated link-->
@@ -76,9 +78,11 @@
 
         <!--Actions-->
         <PopupActions>
-            <ButtonBase v-if="! isGeneratedShared" class="popup-button" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }}
+            <ButtonBase v-if="! isGeneratedShared" class="popup-button" @click.native="$closePopup()" button-style="secondary">
+                {{ $t('popup_move_item.cancel') }}
             </ButtonBase>
-            <ButtonBase class="popup-button" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">{{ submitButtonText }}
+            <ButtonBase class="popup-button" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">
+                {{ submitButtonText }}
             </ButtonBase>
         </PopupActions>
     </PopupWrapper>

resources/js/components/Others/ShareEdit.vue

@@ -50,7 +50,7 @@
 
                 <!--Set password-->
                 <ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
-                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 

resources/js/components/Others/TabWrapper.vue

@@ -4,13 +4,15 @@
             <div class="tab" :class="{ active: tab.isActive }" @click="selectTab(tab)" v-for="(tab, i) in tabs" :key="i">
 
                 <!--Icon-->
-                <mail-icon v-if="tab.icon === 'email'" class="tab-icon" size="17"/>
-                <link-icon v-if="tab.icon === 'link'" class="tab-icon" size="17"/>
-                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon" size="17"/>
-                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon" size="17"/>
+                <mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme" size="17"/>
+                <link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme" size="17"/>
+                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme" size="17"/>
+                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme" size="17"/>
 
                 <!--Title-->
-                <b class="tab-title">{{tab.title}}</b>
+                <b class="tab-title">
+                    {{tab.title}}
+                </b>
             </div>
         </div>
         <slot></slot>
@@ -94,7 +96,7 @@
             circle,
             line,
             polyline {
-                stroke: $theme !important;
+                color: inherit !important;
             }
         }
     }

resources/js/components/Others/ThumbnailItem.vue

@@ -14,7 +14,7 @@
             <img v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
 
             <!--Else show only folder icon-->
-            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder" />
+            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder svg-color-theme" />
         </div>
 
         <!--Name-->

resources/js/components/Others/TreeMenu.vue

@@ -2,10 +2,10 @@
     <!--Folder Icon-->
     <div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById.id === nodes.id || !disableId} ">
 
-        <div class="folder-item" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
+        <div class="folder-item text-theme" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
             <chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
-            <hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon"></hard-drive-icon>
-            <folder-icon v-if="nodes.location !== 'base'" size="17" class="icon"></folder-icon>
+            <hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon text-theme"></hard-drive-icon>
+            <folder-icon v-if="nodes.location !== 'base'" size="17" class="icon text-theme"></folder-icon>
             <span class="label">{{ nodes.name }}</span>
         </div>
 
@@ -150,12 +150,12 @@
 
             .icon {
                 path, line, polyline, rect, circle {
-                    stroke: $theme;
+                    color: inherit;
                 }
             }
 
             .label {
-                color: $theme;
+                color: inherit;
             }
         }
     }

resources/js/components/Others/TreeMenuNavigator.vue

@@ -15,8 +15,7 @@
                 <span class="label">{{ nodes.name }}</span>
             </div>
 
-            <TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders"
-                               :key="item.id"/>
+            <TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id"/>
         </div>
     </transition>
 </template>