Redesign share button

src/renderer/assets/img/invidious-logo-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="129.158" height="129.158" viewBox="0 0 34.173 34.173"><g transform="translate(26.909 -78.793)" paint-order="fill markers stroke"><circle cx="-9.822" cy="95.88" r="16.557" fill="none" stroke="#ddd" stroke-width="1.058" stroke-linecap="round" stroke-linejoin="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M-10.713 89.306l-.743 2.64 6.893 13.75h2.034zm-.743 2.64l-3.976 13.423.508.15 4.49-15.177zm-4.933 13.228v.53h2.813v-.53z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" fill="#ddd"/><circle cx="-10.763" cy="87.186" r="1.105" fill="#00b6f0"/></g></svg>

src/renderer/assets/img/invidious-logo-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="129.158" height="129.158" viewBox="0 0 34.173 34.173"><g transform="translate(26.909 -78.793)" paint-order="fill markers stroke"><circle cx="-9.822" cy="95.88" r="16.557" fill="none" stroke="#212121" stroke-width="1.058" stroke-linecap="round" stroke-linejoin="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M-10.713 89.306l-.743 2.64 6.893 13.75h2.034zm-.743 2.64l-3.976 13.423.508.15 4.49-15.177zm-4.933 13.228v.53h2.813v-.53z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" fill="#212121"/><circle cx="-10.763" cy="87.186" r="1.105" fill="#00b6f0"/></g></svg>

src/renderer/components/ft-button/ft-button.vue

@@ -8,7 +8,9 @@
     }"
     @click="$emit('click')"
   >
-    {{ label }}
+    <slot>
+      {{ label }}
+    </slot>
   </button>
 </template>
 

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -23,16 +23,6 @@
         top: dropdownPositionY === 'top'
       }"
     >
-      <ul class="list">
-        <li
-          v-for="(label, index) in dropdownNames"
-          class="listItem"
-          :key="index"
-          @click="handleDropdownClick(index)"
-        >
-          {{ label }}
-        </li>
-      </ul>
       <slot>
         <ul
           class="list"

src/renderer/components/ft-share-button/ft-share-button.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+export default Vue.extend({
+  name: 'FtShareButton',
+  components: {
+    'ft-icon-button': FtIconButton,
+    'ft-button': FtButton
+  }
+})

src/renderer/components/ft-share-button/ft-share-button.sass

@@ -0,0 +1,51 @@
+.shareLinks
+	display: grid
+	grid-template-rows: auto auto auto
+	grid-auto-flow: column
+	padding: 12px
+	width: max-content
+
+	.header
+		font-size: 18px
+		font-weight: bold
+		margin: 4px 0px 8px
+		color: var(--primary-text-color)
+
+	.action
+		padding: 6px
+
+	.divider
+		grid-row: span 3
+		margin: 0px 12px
+		width: 1px
+		background: var(--tertiary-text-color)
+
+	.youtubeLogo
+		height: 18px
+		width: auto
+
+		@at-root
+			.dark &
+				filter: brightness(0.868)
+
+			.light &
+				filter: invert(0.87)
+
+	.invidious
+		display: flex
+		justify-content: center
+		letter-spacing: -0.4px
+
+		.invidiousLogo
+			display: inline-block
+			width: 20px
+			height: 20px
+			background-size: cover
+			margin-right: 2px
+
+			@at-root
+				.dark &
+					background-image: url(~../../assets/img/invidious-logo-dark.svg)
+
+				.light &
+					background-image: url(~../../assets/img/invidious-logo-light.svg)

src/renderer/components/ft-share-button/ft-share-button.vue

@@ -0,0 +1,39 @@
+<template>
+	<ft-icon-button
+		title="Share Video"
+		theme="secondary"
+		icon="share-alt"
+		:forceDropdown="true"
+	>
+		<div class="shareLinks">
+			<div class="header">
+				<img class="youtubeLogo" src="~../../assets/img/yt_logo_mono_dark.png" alt="YouTube" width="794" height="178">
+			</div>
+
+			<ft-button class="action">
+				<font-awesome-icon icon="copy"></font-awesome-icon>
+				Copy link
+			</ft-button>
+			<ft-button class="action">
+				<font-awesome-icon icon="globe"></font-awesome-icon>
+				Open link
+			</ft-button>
+
+			<div class="divider"></div>
+
+			<div class="header invidious"><span class="invidiousLogo"></span>Invidious</div>
+
+			<ft-button class="action">
+				<font-awesome-icon icon="copy"></font-awesome-icon>
+				Copy link
+			</ft-button>
+			<ft-button class="action">
+				<font-awesome-icon icon="globe"></font-awesome-icon>
+				Open link
+			</ft-button>
+		</div>
+	</ft-icon-button>
+</template>
+
+<script src="./ft-share-button.js" />
+<style scoped lang="sass" src="./ft-share-button.sass" />

src/renderer/components/watch-video-info/watch-video-info.js

@@ -4,6 +4,7 @@ import FtButton from '../ft-button/ft-button.vue'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import FtShareButton from '../ft-share-button/ft-share-button.vue'
 // import { shell } from 'electron'
 
 export default Vue.extend({
@@ -13,7 +14,8 @@ export default Vue.extend({
     'ft-button': FtButton,
     'ft-list-dropdown': FtListDropdown,
     'ft-flex-box': FtFlexBox,
-    'ft-icon-button': FtIconButton
+    'ft-icon-button': FtIconButton,
+    'ft-share-button': FtShareButton
   },
   props: {
     id: {

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -71,15 +71,7 @@
           :dropdown-values="formatTypeValues"
           @click="handleFormatChange"
         />
-        <ft-icon-button
+        <ft-share-button class="option"></ft-share-button>
-          title="Share Video"
-          class="option"
-          theme="secondary"
-          icon="share-alt"
-          :dropdown-names="shareNames"
-          :dropdown-values="shareValues"
-          @click="handleShare"
-        />
       </div>
     </div>
   </ft-card>