Replaced teal by accent color

2020-06-22 16:46:43 +02:00 · 2020-06-22 16:46:43 +02:00 · cf495360de
commit cf495360de
--- a/front/scripts/fix-fomantic-css.py
+++ b/front/scripts/fix-fomantic-css.py
@ -37,6 +37,11 @@ GLOBAL_REPLACES = [
    ("#e76b00", "var(--vibrant-active-color)"),
    ("#e55b00", "var(--vibrant-focus-color)"),
    ("#f17000", "var(--vibrant-focus-color)"),
+    (".teal", ".accent"),
+    ("#00B5AD", "var(--accent-color)"),
+    ("#009c95", "var(--accent-hover-color)"),
+    ("#00827c", "var(--accent-active-color)"),
+    ("#008c86", "var(--accent-focus-color)"),
    (".green", ".success"),
    ("#21BA45", "var(--success-color)"),
    ("#2ECC40", "var(--success-color)"),
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@ -18,7 +18,7 @@
              <i class="wrench icon"></i>
              <div
                v-if="moderationNotifications > 0"
-                :class="['ui', 'teal', 'mini', 'bottom floating', 'circular', 'label']">{{ moderationNotifications }}</div>
+                :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']">{{ moderationNotifications }}</div>
              <div class="menu">
                <div class="header">
                  <translate translate-context="Sidebar/Admin/Title/Noun">Administration</translate>
@ -31,7 +31,7 @@
                  <div
                    v-if="$store.state.ui.notifications.pendingReviewEdits > 0"
                    :title="labels.pendingReviewEdits"
-                    :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">
+                    :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">
                    {{ $store.state.ui.notifications.pendingReviewEdits }}</div>
                  <translate translate-context="*/*/*/Noun">Library</translate>
                </router-link>
@ -42,7 +42,7 @@
                  <div
                    v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests> 0"
                    :title="labels.pendingReviewReports"
-                    :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}</div>
+                    :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }}</div>
                  <translate translate-context="*/Moderation/*">Moderation</translate>
                </router-link>
                <router-link
@ -70,7 +70,7 @@
        <router-link class="item" v-if="$store.state.auth.authenticated" :title="labels.notifications" :to="{name: 'notifications'}">
          <i class="bell icon"></i><div
            v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0"
-            :class="['ui', 'teal', 'mini', 'bottom floating', 'circular', 'label']">{{ $store.state.ui.notifications.inbox + additionalNotifications }}</div>
+            :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']">{{ $store.state.ui.notifications.inbox + additionalNotifications }}</div>
        </router-link>
        <div class="item">
          <div class="ui user-dropdown dropdown" >
--- a/front/src/components/audio/EmbedWizard.vue
+++ b/front/src/components/audio/EmbedWizard.vue
@ -27,7 +27,7 @@
          </template>
        </div>
        <div class="field">
-          <button @click="copy" class="ui right teal labeled icon floated button"><i class="copy icon"></i><translate translate-context="*/*/Button.Label/Short, Verb">Copy</translate></button>
+          <button @click="copy" class="ui right accent labeled icon floated button"><i class="copy icon"></i><translate translate-context="*/*/Button.Label/Short, Verb">Copy</translate></button>
          <label for="embed-width"><translate translate-context="Popup/Embed/Input.Label/Noun">Embed code</translate></label>
          <p><translate translate-context="Popup/Embed/Paragraph">Copy/paste this code in your website HTML</translate></p>
          <textarea ref="textarea" :value="embedCode" rows="5" readonly>
--- a/front/src/components/common/CopyInput.vue
+++ b/front/src/components/common/CopyInput.vue
@ -14,7 +14,7 @@
 export default {
  props: {
    value: {type: String},
-    buttonClasses: {type: String, default: 'teal'},
+    buttonClasses: {type: String, default: 'accent'},
    id: {type: String, default: 'copy-input'},
  },
  data () {
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@ -70,7 +70,7 @@
              </router-link>
              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.attributed_to.domain)" :title="scope.obj.attributed_to.domain">{{ scope.obj.attributed_to.domain }}</span>
            </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.attributed_to.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.attributed_to.domain)">
              <i class="home icon"></i>
              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
            </span>
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@ -61,7 +61,7 @@
              </router-link>
              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
            </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
              <i class="home icon"></i>
              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
            </span>
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@ -65,7 +65,7 @@
              </router-link>
              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
            </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
              <i class="home icon"></i>
              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
            </span>
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@ -71,7 +71,7 @@
              </router-link>
              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
            </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
              <i class="home icon"></i>
              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
            </span>
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@ -69,7 +69,7 @@
              </router-link>
              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
            </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
              <i class="home icon"></i>
              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
            </span>
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@ -95,7 +95,7 @@
              </router-link>
              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
            </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
              <i class="home icon"></i>
              <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
            </span>
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@ -55,7 +55,7 @@
              </router-link>
              <span role="button" class="discrete link" @click="addSearchToken('domain', scope.obj.domain)" :title="scope.obj.domain">{{ scope.obj.domain }}</span>
            </template>
-            <span role="button" v-else class="ui tiny teal icon link label" @click="addSearchToken('domain', scope.obj.domain)">
+            <span role="button" v-else class="ui tiny accent icon link label" @click="addSearchToken('domain', scope.obj.domain)">
              <i class="home icon"></i>
              <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate>
            </span>
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@ -8,7 +8,7 @@
      :key="tag">
      #{{ tag|truncate(truncateSize) }}
    </router-link>
-    <div role="button" @click.prevent="honorLimit = false" class="ui circular inverted teal label" v-if="showMore && toDisplay.length < tags.length">
+    <div role="button" @click.prevent="honorLimit = false" class="ui circular inverted accent label" v-if="showMore && toDisplay.length < tags.length">
      <translate translate-context="Content/*/Button/Label/Verb" :translate-params="{count: tags.length - toDisplay.length}" :translate-n="tags.length - toDisplay.length" translate-plural="Show %{ count } more tags">Show 1 more tag</translate>
    </div>
  </div>
--- a/front/src/style/_vars.scss
+++ b/front/src/style/_vars.scss
@ -12,7 +12,6 @@ $success-hover-color: #16ab39 !default;
 $success-active-color: #198f35 !default;
 $success-focus-color: var(--$success-hover-color) !default;

-
 $primary-color: #2185D0 !default;
 $primary-hover-color: #1678c2 !default;
 $primary-active-color: #1a69a4 !default;
@ -28,6 +27,11 @@ $danger-hover-color: #ff392b !default;
 $danger-active-color: #b21e1e !default;
 $danger-focus-color: var(--danger-hover-color) !default;

+$accent-color: #00B5AD !default;
+$accent-hover-color: #009c95 !default;
+$accent-active-color: #00827c !default;
+$accent-focus-color: var(--accent-hover-color) !default;
+
 $link-color: #4183C4 !default;
 $link-text-decoration: none !default;
 $link-hover-color: #1e70bf !default;
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@ -15,7 +15,7 @@
                  {{ object.artist.name | truncate(100) }}
                  <div class="sub header">
                    <template v-if="object.artist.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                        <i class="home icon"></i>
                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                      </span>
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@ -15,7 +15,7 @@
                  {{ object.title | truncate(100) }}
                  <div class="sub header">
                    <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                        <i class="home icon"></i>
                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                      </span>
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@ -15,7 +15,7 @@
                  {{ object.name | truncate(100) }}
                  <div class="sub header">
                    <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                        <i class="home icon"></i>
                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                      </span>
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@ -14,7 +14,7 @@
                  {{ object.name | truncate(100) }}
                  <div class="sub header">
                    <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                        <i class="home icon"></i>
                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                      </span>
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@ -15,7 +15,7 @@
                  {{ object.title | truncate(100) }}
                  <div class="sub header">
                    <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                        <i class="home icon"></i>
                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                      </span>
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@ -15,7 +15,7 @@
                  {{ displayName(object) | truncate(100) }}
                  <div class="sub header">
                    <template v-if="object.is_local">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                        <i class="home icon"></i>
                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                      </span>
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@ -14,7 +14,7 @@
                  {{ object.full_username }}
                  <div class="sub header">
                    <template v-if="object.user">
-                      <span class="ui tiny teal label">
+                      <span class="ui tiny accent label">
                        <i class="home icon"></i>
                        <translate translate-context="Content/Moderation/*/Short, Noun">Local account</translate>
                      </span>
--- a/front/src/views/admin/moderation/Base.vue
+++ b/front/src/views/admin/moderation/Base.vue
@ -7,7 +7,7 @@
        <translate translate-context="*/Moderation/*/Noun">Reports</translate>
        <div
          v-if="$store.state.ui.notifications.pendingReviewReports > 0"
-          :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewReports }}</div>
+          :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">{{ $store.state.ui.notifications.pendingReviewReports }}</div>
      </router-link>
      <router-link
        class="ui item"
@ -15,7 +15,7 @@
        <translate translate-context="*/Moderation/*/Noun">User Requests</translate>
        <div
          v-if="$store.state.ui.notifications.pendingReviewRequests > 0"
-          :class="['ui', 'circular', 'mini', 'right floated', 'teal', 'label']">{{ $store.state.ui.notifications.pendingReviewRequests }}</div>
+          :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']">{{ $store.state.ui.notifications.pendingReviewRequests }}</div>
      </router-link>
      <router-link
        class="ui item"