From c213904e48b3d7a6eb981d65fa4997c67ac2359f Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Thu, 20 Feb 2025 01:17:51 +0100
Subject: [PATCH] Convert FtSubscribeButton and watch-video-info SCSS to CSS
 (#6814)

* Convert FtSubscribeButton SCSS to CSS

* Convert watch-video-info SCSS to CSS

* Fix CSS formatting

Co-authored-by: PikachuEXE <git@pikachuexe.net>

---------

Co-authored-by: PikachuEXE <git@pikachuexe.net>
---
 .../FtSubscribeButton/FtSubscribeButton.css   | 139 +++++++++++++++++
 .../FtSubscribeButton/FtSubscribeButton.scss  | 143 ------------------
 .../FtSubscribeButton/FtSubscribeButton.vue   |   9 +-
 .../watch-video-info/watch-video-info.css     | 132 ++++++++++++++++
 .../watch-video-info/watch-video-info.scss    | 141 -----------------
 .../watch-video-info/watch-video-info.vue     |   7 +-
 6 files changed, 278 insertions(+), 293 deletions(-)
 create mode 100644 src/renderer/components/FtSubscribeButton/FtSubscribeButton.css
 delete mode 100644 src/renderer/components/FtSubscribeButton/FtSubscribeButton.scss
 create mode 100644 src/renderer/components/watch-video-info/watch-video-info.css
 delete mode 100644 src/renderer/components/watch-video-info/watch-video-info.scss

diff --git a/src/renderer/components/FtSubscribeButton/FtSubscribeButton.css b/src/renderer/components/FtSubscribeButton/FtSubscribeButton.css
new file mode 100644
index 0000000000000..de83d33a505a4
--- /dev/null
+++ b/src/renderer/components/FtSubscribeButton/FtSubscribeButton.css
@@ -0,0 +1,139 @@
+.buttonList {
+  margin: 5px;
+  margin-block-end: 10px;
+  border-radius: 4px;
+  block-size: fit-content;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+  display: flex;
+  flex-wrap: nowrap;
+
+  /* addresses odd clipping behavior when adjusting window size */
+  background-color: var(--primary-color);
+}
+
+.ftSubscribeButton {
+  position: relative;
+  text-align: start;
+  inline-size: fit-content;
+}
+
+.subscribeButton {
+  min-inline-size: 150px;
+  white-space: initial;
+}
+
+.subscribeButton,
+.profileDropdownToggle {
+  align-self: center;
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.profileDropdownToggle {
+  border-inline-start: none !important;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  display: inline-block;
+  min-inline-size: 1em;
+  padding-inline: 10px;
+  box-sizing: content-box;
+}
+
+.subscribeButton.hasProfileDropdownToggle {
+  min-inline-size: 100px;
+  padding-inline: 5px;
+  border-inline-end: 2px solid var(--primary-color-active) !important;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  box-sizing: content-box;
+}
+
+.subscribeButton.hasProfileDropdownToggle,
+.profileDropdownToggle {
+  padding-block: 5px;
+  padding-inline: 6px;
+  box-shadow: none;
+  flex: auto;
+  block-size: 2em;
+}
+
+.subscribeButton.dropdownOpened,
+.profileDropdownToggle.dropdownOpened {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.profileDropdown {
+  background-color: var(--side-nav-color);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+  color: var(--secondary-text-color);
+  display: inline;
+  font-size: 12px;
+  max-block-size: 200px;
+  margin-block: -10px 0;
+  margin-inline: 5px 0;
+  overflow-y: scroll;
+  position: absolute;
+  text-align: center;
+  user-select: none;
+  z-index: 3;
+
+  /* accounts for parent's left and right margins */
+  inline-size: calc(100% - 10px);
+}
+
+.profileList {
+  list-style-type: none;
+  margin: 0;
+  padding-inline: 0;
+}
+
+.profile {
+  cursor: pointer;
+  display: flex;
+  gap: 0.5em;
+  padding-inline-start: 0.5em;
+  block-size: 50px;
+  align-items: center;
+  transition: background 0.2s ease-out;
+}
+
+.profile:hover {
+  background-color: var(--side-nav-hover-color);
+  color: var(--side-nav-hover-text-color);
+  transition: background 0.2s ease-in;
+}
+
+.colorOption {
+  inline-size: 40px;
+  block-size: 40px;
+  cursor: pointer;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.initial {
+  font-size: 20px;
+  line-height: 1em;
+  text-align: center;
+  user-select: none;
+}
+
+.profileName {
+  padding-inline-end: 1em;
+  text-align: start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.profile.subscribed {
+  background-color: var(--primary-color);
+}
+
+.profile.subscribed > .profileName {
+  color: var(--text-with-main-color);
+}
diff --git a/src/renderer/components/FtSubscribeButton/FtSubscribeButton.scss b/src/renderer/components/FtSubscribeButton/FtSubscribeButton.scss
deleted file mode 100644
index f0a506fbc1616..0000000000000
--- a/src/renderer/components/FtSubscribeButton/FtSubscribeButton.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-.buttonList {
-  margin: 5px;
-  margin-block-end: 10px;
-  border-radius: 4px;
-  block-size: fit-content;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-  display: flex;
-  flex-wrap: nowrap;
-
-  /* addresses odd clipping behavior when adjusting window size */
-  background-color: var(--primary-color);
-}
-
-.ftSubscribeButton {
-  position: relative;
-  text-align: start;
-  inline-size: fit-content;
-}
-
-/* Ensures style here overrides style of .btn */
-.subscribeButton.btn {
-  min-inline-size: 150px;
-  white-space: initial;
-}
-
-.subscribeButton.btn,
-.profileDropdownToggle.btn {
-  align-self: center;
-  margin-block: 0;
-  margin-inline: 0;
-}
-
-.dropdownOpened {
-  .subscribeButton,
-  .profileDropdownToggle {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-}
-
-.profileDropdownToggle.btn {
-  border-inline-start: none !important;
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  display: inline-block;
-  min-inline-size: 1em;
-  padding-inline: 10px;
-  box-sizing: content-box;
-}
-
-.hasProfileDropdownToggle {
-  .subscribeButton.btn {
-    min-inline-size: 100px;
-    padding-inline: 5px;
-    border-inline-end: 2px solid var(--primary-color-active) !important;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    box-sizing: content-box;
-  }
-}
-
-.hasProfileDropdownToggle > .subscribeButton.btn,
-.profileDropdownToggle.btn {
-  padding-block: 5px;
-  padding-inline: 6px;
-  box-shadow: none;
-  flex: auto;
-  block-size: 2em;
-}
-
-.profileDropdown {
-  background-color: var(--side-nav-color);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-  color: var(--secondary-text-color);
-  display: inline;
-  font-size: 12px;
-  max-block-size: 200px;
-  margin-block: -10px 0;
-  margin-inline: 5px 0;
-  overflow-y: scroll;
-  position: absolute;
-  text-align: center;
-  user-select: none;
-  z-index: 3;
-  // accounts for parent's left and right margins
-  inline-size: calc(100% - 10px);
-
-  .profileList {
-    list-style-type: none;
-    margin: 0;
-    padding-inline: 0;
-  }
-
-  .profile {
-    cursor: pointer;
-    display: flex;
-    gap: 0.5em;
-    padding-inline-start: 0.5em;
-    block-size: 50px;
-    align-items: center;
-    transition: background 0.2s ease-out;
-
-    &:hover {
-      background-color: var(--side-nav-hover-color);
-      color: var(--side-nav-hover-text-color);
-      transition: background 0.2s ease-in;
-    }
-
-    .colorOption {
-      inline-size: 40px;
-      block-size: 40px;
-      cursor: pointer;
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      flex-shrink: 0;
-      border-radius: 50%;
-    }
-
-    .initial {
-      font-size: 20px;
-      line-height: 1em;
-      text-align: center;
-      user-select: none;
-    }
-
-    .profileName {
-      padding-inline-end: 1em;
-      text-align: start;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &.subscribed {
-      background-color: var(--primary-color);
-
-      .profileName {
-        color: var(--text-with-main-color);
-      }
-    }
-  }
-}
diff --git a/src/renderer/components/FtSubscribeButton/FtSubscribeButton.vue b/src/renderer/components/FtSubscribeButton/FtSubscribeButton.vue
index f881b9df4fa17..74f99553f7a09 100644
--- a/src/renderer/components/FtSubscribeButton/FtSubscribeButton.vue
+++ b/src/renderer/components/FtSubscribeButton/FtSubscribeButton.vue
@@ -2,17 +2,19 @@
   <div
     ref="subscribeButton"
     class="ftSubscribeButton"
-    :class="{ dropdownOpened: isProfileDropdownOpen}"
     @focusout="handleProfileDropdownFocusOut"
   >
     <div
       class="buttonList"
-      :class="{ hasProfileDropdownToggle: isProfileDropdownEnabled}"
     >
       <FtButton
         :label="subscribedText"
         :no-border="true"
         class="subscribeButton"
+        :class="{
+          hasProfileDropdownToggle: isProfileDropdownEnabled,
+          dropdownOpened: isProfileDropdownOpen
+        }"
         background-color="var(--primary-color)"
         text-color="var(--text-with-main-color)"
         @click="handleSubscription(activeProfile)"
@@ -30,6 +32,7 @@
         :no-border="true"
         :title="isProfileDropdownOpen ? $t('Profile.Close Profile Dropdown') : $t('Profile.Open Profile Dropdown')"
         class="profileDropdownToggle"
+        :class="{ dropdownOpened: isProfileDropdownOpen}"
         background-color="var(--primary-color)"
         text-color="var(--text-with-main-color)"
         :aria-expanded="isProfileDropdownOpen"
@@ -311,4 +314,4 @@ function isProfileSubscribed(profile) {
 }
 </script>
 
-<style scoped lang="scss" src="./FtSubscribeButton.scss" />
+<style scoped src="./FtSubscribeButton.css" />
diff --git a/src/renderer/components/watch-video-info/watch-video-info.css b/src/renderer/components/watch-video-info/watch-video-info.css
new file mode 100644
index 0000000000000..bef71b5dad777
--- /dev/null
+++ b/src/renderer/components/watch-video-info/watch-video-info.css
@@ -0,0 +1,132 @@
+.watchVideoInfo {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 8px;
+}
+
+.videoTitle {
+  display: block;
+  font-size: 22px;
+  font-weight: normal;
+  margin-block: 0;
+  margin-inline: 0;
+  word-wrap: break-word;
+}
+
+.videoMetrics,
+.videoButtons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.unlistedBadge {
+  background-color: var(--secondary-card-bg-color);
+  border-radius: 5px;
+  display: inline;
+  padding-inline: 5px;
+  padding-block: 2px;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.profileRow {
+  display: flex;
+  align-items: center;
+}
+
+.channelThumbnail {
+  border-radius: 50%;
+  cursor: pointer;
+  margin-inline-end: 10px;
+  inline-size: 56px;
+}
+
+.channelName {
+  color: inherit;
+  cursor: pointer;
+  display: block;
+  margin-inline-start: 6px;
+  margin-block-end: 3px;
+  position: relative;
+  text-decoration: inherit;
+  inset-block-start: -2px;
+}
+
+.videoMetrics {
+  font-size: 14px;
+  color: var(--tertiary-text-color);
+}
+
+.likeSection {
+  color: var(--tertiary-text-color);
+  display: flex;
+  flex-direction: column;
+  margin-inline-start: auto;
+  margin-block-start: 4px;
+  max-inline-size: 210px;
+  text-align: end;
+}
+
+.likeBar {
+  border-radius: 4px;
+  block-size: 8px;
+  margin-block-end: 4px;
+}
+
+.likeCount {
+  margin-inline-end: 0;
+  display: flex;
+  gap: 3px;
+}
+
+.videoViews {
+  white-space: nowrap;
+}
+
+.videoOptions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+@media screen and (width <= 460px) {
+  .datePublishedAndViewCount {
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+  }
+
+  .seperator {
+    display: none;
+  }
+
+  .videoButtons {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-block-start: 10px;
+  }
+
+  .videoOptions {
+    flex-wrap: nowrap;
+  }
+
+  .videoOptions :deep(.iconDropdown) {
+    inset-inline: auto;
+  }
+}
+
+@media screen and (width <= 680px) {
+  .likeSection {
+    margin-inline-start: 0;
+    text-align: start;
+  }
+
+  .videoOptions :deep(.iconDropdown) {
+    inset-inline: auto calc(50% - 20px);
+  }
+}
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
deleted file mode 100644
index 1f1ae6dc793df..0000000000000
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-.watchVideoInfo {
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  gap: 8px;
-}
-
-.videoTitle {
-  display: block;
-  font-size: 22px;
-  font-weight: normal;
-  margin-block: 0;
-  margin-inline: 0;
-  word-wrap: break-word;
-}
-
-.videoMetrics,
-.videoButtons {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-}
-
-.unlistedBadge {
-  background-color: var(--secondary-card-bg-color);
-  border-radius: 5px;
-  display: inline;
-  padding-inline: 5px;
-  padding-block: 2px;
-  white-space: nowrap;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.videoButtons {
-  .profileRow {
-    display: flex;
-    align-items: center;
-  }
-
-  .channelThumbnail {
-    border-radius: 50%;
-    cursor: pointer;
-    margin-inline-end: 10px;
-    inline-size: 56px;
-  }
-
-  .channelName {
-    color: inherit;
-    cursor: pointer;
-    display: block;
-    margin-inline-start: 6px;
-    margin-block-end: 3px;
-    position: relative;
-    text-decoration: inherit;
-    inset-block-start: -2px;
-  }
-
-  .subscribeButton {
-    font-size: 14px;
-    margin-inline-start: 6px;
-    margin-block: 0;
-    padding: 6px;
-  }
-
-  .videoOptions {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: 4px;
-
-    @media screen and (width <= 680px) {
-      :deep(.iconDropdown) {
-        inset-inline: auto calc(50% - 20px);
-      }
-    }
-
-    @media screen and (width <= 460px) {
-      flex-wrap: nowrap;
-
-      :deep(.iconDropdown) {
-        inset-inline: auto;
-      }
-    }
-  }
-
-  @media screen and (width <= 460px) {
-    flex-direction: column;
-    align-items: flex-start;
-    margin-block-start: 10px;
-  }
-}
-
-.videoMetrics {
-  font-size: 14px;
-  color: var(--tertiary-text-color);
-
-  .likeSection {
-    color: var(--tertiary-text-color);
-    display: flex;
-    flex-direction: column;
-    margin-inline-start: auto;
-    margin-block-start: 4px;
-    max-inline-size: 210px;
-    text-align: end;
-
-    @media screen and (width <= 680px) {
-      margin-inline-start: 0;
-      text-align: start;
-    }
-
-    .likeBar {
-      border-radius: 4px;
-      block-size: 8px;
-      margin-block-end: 4px;
-    }
-
-    .likeCount {
-      margin-inline-end: 0;
-      display: flex;
-      gap: 3px;
-    }
-  }
-
-  .datePublishedAndViewCount {
-    @media only screen and (width <= 460px) {
-      display: flex;
-      justify-content: left;
-      flex-direction: column;
-
-      .seperator {
-        display: none;
-      }
-    }
-  }
-
-  .videoViews {
-    white-space: nowrap;
-  }
-}
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 165f9c33e59d1..96ed9a8aa78f4 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -89,7 +89,6 @@
           v-if="showPlaylists && !isUpcoming"
           :title="$t('User Playlists.Add to Playlist')"
           :icon="['fas', 'plus']"
-          class="option"
           theme="base"
           @click="togglePlaylistPrompt"
         />
@@ -108,7 +107,6 @@
           v-if="externalPlayer !== ''"
           :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
           :icon="['fas', 'external-link-alt']"
-          class="option"
           theme="secondary"
           @click="handleExternalPlayer"
         />
@@ -116,7 +114,6 @@
           v-if="!isUpcoming && downloadLinks.length > 0"
           ref="downloadButton"
           :title="$t('Video.Download Video')"
-          class="option"
           theme="secondary"
           :icon="['fas', 'download']"
           :return-index="true"
@@ -126,7 +123,6 @@
         <ft-icon-button
           v-if="!isUpcoming"
           :title="$t('Change Format.Change Media Formats')"
-          class="option"
           theme="secondary"
           :icon="['fas', 'file-video']"
           :dropdown-options="formatTypeOptions"
@@ -137,7 +133,6 @@
           :id="id"
           :get-timestamp="getTimestamp"
           :playlist-id="playlistId"
-          class="option"
         />
       </div>
     </div>
@@ -145,4 +140,4 @@
 </template>
 
 <script src="./watch-video-info.js" />
-<style scoped src="./watch-video-info.scss" lang="scss" />
+<style scoped src="./watch-video-info.css" />