gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat. 다운로드 버튼 컴포넌트 추가

Browse Source
This commit is contained in:
clkim
2025-10-29 15:08:09 +09:00
parent dc219fd865
commit e5a1b0e2ae
11 changed files with 328 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
layers/components/atoms/Button/Download.vue Normal file
View File

@@ -0,0 +1,177 @@
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import type {
DownloadButtonType,
ButtonVariant,
} from '#layers/types/components/button'
type Platform = 'google_play' | 'app_store' | 'pc' | 'stove'
interface Props {
platform: Platform
type?: DownloadButtonType
variant?: ButtonVariant
backgroundColor?: string
textColor?: string
disabled?: boolean
}
const props = withDefaults(defineProps<Props>(), {
type: 'default',
variant: 'filled',
disabled: false,
})
const PLATFORM_ICON_MAP: Record<Platform, string> = {
google_play: 'AtomsIconsLogoGoogle',
app_store: 'AtomsIconsLogoApple',
pc: 'AtomsIconsLogoWindow',
stove: 'AtomsIconsLogoStove',
} as const
const DUP_IMAGE_MAP: Record<Platform, string> = {
google_play: '/images/common/btn_logo-google.svg',
app_store: '/images/common/btn_logo-app.svg',
pc: '/images/common/btn_logo-pc.svg',
stove: '/images/common/btn_system_normal_stove_pc.svg',
} as const
const isDuplication = computed(() => props.type === 'duplication')
const isSingle = computed(() => props.type === 'single')
const platformIcon = computed(() => PLATFORM_ICON_MAP[props.platform])
const duplicationImage = computed(() =>
isDuplication.value ? DUP_IMAGE_MAP[props.platform] : ''
)
const inlineStyle = computed<CSSProperties>(() => {
const style: CSSProperties = {}
if (props.backgroundColor) {
style.backgroundColor = props.backgroundColor
}
if (props.textColor) {
style.color = props.textColor
}
if (props.type === 'duplication') {
style.backgroundImage = `url(${duplicationImage.value})`
}
return style
})
</script>
<template>
<button
type="button"
:class="[
'btn-base',
props.type,
{ 'no-text': isSingle && !$slots.default },
]"
:data-variant="props.variant"
:data-platform="props.platform"
:style="inlineStyle"
:disabled="disabled"
>
<span class="btn-content">
<component
:is="platformIcon"
v-if="!isDuplication"
class="icon-platform"
/>
<slot />
</span>
<span v-if="type === 'default'" class="icon-download">
<AtomsIconsDownloadLine />
</span>
</button>
</template>
<style scoped>
.btn-base {
@apply overflow-hidden relative inline-flex items-center font-medium cursor-pointer
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-white/10
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0;
}
.btn-base:hover {
@apply after:opacity-20;
}
.btn-content {
@apply relative flex items-center z-[1];
}
.icon-platform {
@apply w-5 h-5 bg-contain bg-center bg-no-repeat;
}
.btn-base[data-variant='filled'] {
@apply bg-[#383838] text-[#ffffff];
}
.btn-base[data-variant='outlined'] {
@apply bg-white text-[#1F1F1F]
before:border-black/10
after:hidden;
}
.btn-base[data-variant='outlined'][data-platform='app_store'] svg,
.btn-base[data-variant='outlined'][data-platform='pc'] svg,
.btn-base[data-variant='outlined'][data-platform='stove'] svg {
@apply fill-[#1F1F1F];
}
/* default */
.btn-base.default {
@apply justify-between w-[296px] py-3.5 px-5 text-[14px] rounded-[4px]
md:w-[356px] md:py-4 md:px-6 md:text-[16px]
before:rounded-[4px] after:rounded-[4px];
}
.btn-base.default .icon-download {
@apply border-l border-white/10 ml-4 pl-4;
}
.btn-base.default .icon-platform {
@apply mr-2;
}
.btn-base.default[data-platform='stove'] {
@apply bg-[#FC4420];
}
.btn-base.default[data-variant='outlined'] .icon-download {
@apply border-black/10;
}
.btn-base.default[data-variant='outlined'] .icon-download svg {
@apply fill-[#1F1F1F];
}
/* duplication */
.btn-base.duplication {
@apply items-start bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat rounded-[4px]
before:rounded-[4px] after:rounded-[4px]
h-[48px] pt-[22px] pl-[44px] pr-[22px] text-[11px]
md:h-[64px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
color: red;
}
.btn-base.duplication[data-platform='google_play'] {
@apply min-w-[148px] md:min-w-[194px];
}
.btn-base.duplication[data-platform='app_store'] {
@apply min-w-[132px] md:min-w-[174px];
}
.btn-base.duplication[data-platform='pc'] {
@apply min-w-[113px] md:min-w-[150px];
}
.btn-base.duplication[data-platform='stove'] {
@apply min-w-[113px] md:min-w-[150px];
}
/* single */
.btn-base.single {
@apply justify-center items-center text-[14px]
h-[40px] px-3.5 rounded-[4px]
md:h-[48px] md:rounded-[8px]
before:rounded-[4px] md:before:rounded-[8px];
}
.btn-base.single.no-text {
@apply min-w-[40px] px-0 md:min-w-[48px];
}
.btn-base.single .btn-content {
@apply gap-1;
}
</style>

3
layers/components/atoms/Button/index.vue
View File

@@ -98,4 +98,7 @@ const componentProps = computed(() => {
.btn-base .btn-content {
@apply relative flex items-center gap-1 z-[1];
}
.btn-base.size-extra-small .btn-content {
@apply gap-0.5;
}
</style>

4
layers/components/atoms/icons/DownloadLine.vue
View File

@@ -16,15 +16,13 @@ withDefaults(defineProps<Props>(), {
:width="size"
:height="size"
viewBox="0 0 20 20"
fill="none"
:fill="color"
>
<path
d="M8.9585 2.70829L8.9585 10.1935L5.73673 6.97172C5.32993 6.56493 4.67039 6.56493 4.26359 6.97172C3.85679 7.37852 3.85679 8.03807 4.26359 8.44486L9.26359 13.4449C9.45894 13.6402 9.72389 13.75 10.0002 13.75C10.2764 13.75 10.5414 13.6402 10.7367 13.4449L15.7367 8.44486C16.1435 8.03806 16.1435 7.37852 15.7367 6.97172C15.3299 6.56493 14.6704 6.56493 14.2636 6.97172L11.0418 10.1935L11.0418 2.70829C11.0418 2.133 10.5755 1.66663 10.0002 1.66663C9.42487 1.66663 8.9585 2.133 8.9585 2.70829Z"
:fill="color"
/>
<path
d="M16.6668 17.5C17.2421 17.5 17.7085 17.0336 17.7085 16.4583L17.7085 14.7916C17.7085 14.2163 17.2421 13.75 16.6668 13.75C16.0915 13.75 15.6252 14.2163 15.6252 14.7916L15.6252 15.4166L4.37516 15.4166L4.37516 14.7916C4.37516 14.2163 3.90879 13.75 3.33349 13.75C2.7582 13.75 2.29183 14.2163 2.29183 14.7916L2.29183 16.4583C2.29183 17.0336 2.7582 17.5 3.33349 17.5L16.6668 17.5Z"
:fill="color"
/>
</svg>
</template>

32
public/images/common/ic-v2-logo-apple-fill.svg → layers/components/atoms/icons/LogoApple.vue
View File

@@ -1,4 +1,28 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.0265 6.77515C22.9737 5.57867 23.6003 3.90666 23.4254 2.25C22.0702 2.31136 20.4381 3.20105 19.4618 4.39753C18.5874 5.45595 17.8297 7.15864 18.0337 8.78462C19.5346 8.90734 21.0793 7.97163 22.0265 6.77515Z" fill="white"/>
<path d="M24.1784 9.38534L23.8464 9.35745C22.5604 9.25719 21.3837 9.62957 20.3897 10.0069L19.3814 10.3981C18.917 10.5722 18.5149 10.6972 18.1869 10.6972C17.8232 10.6972 17.3973 10.5679 16.9256 10.3916L15.7142 9.92036C14.9662 9.64193 14.1546 9.40031 13.3246 9.42125C10.8217 9.45315 8.526 10.8727 7.23469 13.1216C4.63612 17.6354 6.56512 24.3024 9.09991 27.9708L9.53965 28.5946L9.84388 29.0098L10.1578 29.4174C11.1678 30.689 12.3337 31.7497 13.755 31.703C14.523 31.6702 15.0938 31.4589 15.6575 31.2216L16.1434 31.0155C16.8008 30.7416 17.5202 30.4909 18.5855 30.4909C19.511 30.4909 20.1636 30.6964 20.7491 30.9348L21.4811 31.246C22.0469 31.481 22.6338 31.6749 23.4478 31.6552C25.1351 31.6284 26.305 30.3637 27.3637 28.8914L27.6635 28.466L28.1083 27.8128C28.254 27.5914 28.3903 27.3714 28.5175 27.1552L28.76 26.7285C28.7984 26.6584 28.8359 26.5889 28.8723 26.5201L29.0796 26.1159C29.1123 26.0501 29.144 25.9851 29.1747 25.921L29.3482 25.5483L29.4998 25.2015L29.6302 24.8848L29.7873 24.4749L29.9 24.155L30 23.8398L29.8843 23.7918L29.5934 23.6516L29.2859 23.4809L29.0483 23.3338L28.7907 23.1589C27.6392 22.3393 26.0767 20.7067 26.0464 17.8746C26.0241 15.2734 27.512 13.6173 28.4644 12.8256L28.6993 12.6386C28.736 12.6106 28.7714 12.5843 28.8052 12.5597L29.0641 12.3809L29.2348 12.2763C28.0657 10.5643 26.4786 9.86607 25.2717 9.57188L24.9218 9.49514L24.5996 9.43898L24.3097 9.39975C24.2644 9.39442 24.2206 9.38964 24.1784 9.38534Z" fill="white"/>
</svg>
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
}
withDefaults(defineProps<Props>(), {
size: 20,
color: '#ffffff',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 36 36"
:fill="color"
>
<path
d="M22.0265 6.77515C22.9737 5.57867 23.6003 3.90666 23.4254 2.25C22.0702 2.31136 20.4381 3.20105 19.4618 4.39753C18.5874 5.45595 17.8297 7.15864 18.0337 8.78462C19.5346 8.90734 21.0793 7.97163 22.0265 6.77515Z"
/>
<path
d="M24.1784 9.38534L23.8464 9.35745C22.5604 9.25719 21.3837 9.62957 20.3897 10.0069L19.3814 10.3981C18.917 10.5722 18.5149 10.6972 18.1869 10.6972C17.8232 10.6972 17.3973 10.5679 16.9256 10.3916L15.7142 9.92036C14.9662 9.64193 14.1546 9.40031 13.3246 9.42125C10.8217 9.45315 8.526 10.8727 7.23469 13.1216C4.63612 17.6354 6.56512 24.3024 9.09991 27.9708L9.53965 28.5946L9.84388 29.0098L10.1578 29.4174C11.1678 30.689 12.3337 31.7497 13.755 31.703C14.523 31.6702 15.0938 31.4589 15.6575 31.2216L16.1434 31.0155C16.8008 30.7416 17.5202 30.4909 18.5855 30.4909C19.511 30.4909 20.1636 30.6964 20.7491 30.9348L21.4811 31.246C22.0469 31.481 22.6338 31.6749 23.4478 31.6552C25.1351 31.6284 26.305 30.3637 27.3637 28.8914L27.6635 28.466L28.1083 27.8128C28.254 27.5914 28.3903 27.3714 28.5175 27.1552L28.76 26.7285C28.7984 26.6584 28.8359 26.5889 28.8723 26.5201L29.0796 26.1159C29.1123 26.0501 29.144 25.9851 29.1747 25.921L29.3482 25.5483L29.4998 25.2015L29.6302 24.8848L29.7873 24.4749L29.9 24.155L30 23.8398L29.8843 23.7918L29.5934 23.6516L29.2859 23.4809L29.0483 23.3338L28.7907 23.1589C27.6392 22.3393 26.0767 20.7067 26.0464 17.8746C26.0241 15.2734 27.512 13.6173 28.4644 12.8256L28.6993 12.6386C28.736 12.6106 28.7714 12.5843 28.8052 12.5597L29.0641 12.3809L29.2348 12.2763C28.0657 10.5643 26.4786 9.86607 25.2717 9.57188L24.9218 9.49514L24.5996 9.43898L24.3097 9.39975C24.2644 9.39442 24.2206 9.38964 24.1784 9.38534Z"
/>
</svg>
</template>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

44
layers/components/atoms/icons/LogoGoogle.vue Normal file
View File

@@ -0,0 +1,44 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
}
withDefaults(defineProps<Props>(), {
size: 20,
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 33 33"
fill="none"
>
<g clip-path="url(#clip0_6093_172)">
<path
d="M16.2529 15.8401L3.54785 29.1226C3.96035 30.5251 5.28035 31.5976 6.84785 31.5976C7.50785 31.5976 8.08535 31.4326 8.58035 31.1026L22.9354 22.9351L16.2529 15.8401Z"
fill="#EA4335"
/>
<path
d="M29.1224 13.53L22.9349 9.98254L16.0049 16.0875L23.0174 22.935L29.2049 19.47C30.2774 18.8925 31.0199 17.7375 31.0199 16.5C30.9374 15.2625 30.1949 14.1075 29.1224 13.53Z"
fill="#FBBC04"
/>
<path
d="M3.54734 3.87769C3.46484 4.12519 3.46484 4.45519 3.46484 4.78519V28.2977C3.46484 28.6277 3.46484 28.8752 3.54734 29.2052L16.7473 16.2527L3.54734 3.87769Z"
fill="#4285F4"
/>
<path
d="M16.3354 16.5001L22.9354 9.98259L8.66285 1.89759C8.16785 1.56759 7.50785 1.40259 6.84785 1.40259C5.28035 1.40259 3.87785 2.47509 3.54785 3.87759L16.3354 16.5001Z"
fill="#34A853"
/>
</g>
<defs>
<clipPath id="clip0_6093_172">
<rect width="33" height="33" fill="white" />
</clipPath>
</defs>
</svg>
</template>

27
layers/components/atoms/icons/LogoStove.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
}
withDefaults(defineProps<Props>(), {
size: 20,
color: '#ffffff',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 17 17"
:fill="color"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.6667 8.33333C16.6667 12.9357 12.9357 16.6667 8.33333 16.6667C3.73096 16.6667 0 12.9357 0 8.33333C0 3.73096 3.73096 0 8.33333 0C12.9357 0 16.6667 3.73096 16.6667 8.33333ZM7.55393 6.8783L7.55605 6.88009C7.76948 7.06425 8.19603 7.17448 8.69379 7.30311C9.90868 7.61706 11.5478 8.04063 11.5478 9.91641C11.5478 11.6738 10.068 12.5 8.23015 12.5C6.95157 12.5 5.1192 11.9879 5.1192 10.8707C5.1192 10.3587 5.44311 9.91705 5.96823 9.91705C6.16268 9.91705 6.3884 10.01 6.66494 10.1239C7.10217 10.3041 7.66644 10.5365 8.43495 10.5365C9.1248 10.5365 9.45091 10.3844 9.45091 10.0677C9.45091 9.91641 9.39384 9.8302 9.30252 9.73706C9.07688 9.51765 8.61746 9.3754 8.0873 9.21125C6.87409 8.8356 5.29047 8.34525 5.29047 6.55315C5.29047 5.07512 6.56347 4.16667 8.37854 4.16667C9.00636 4.16667 10.2852 4.30266 10.7875 4.81477C10.9816 5.0126 11.0772 5.25698 11.0772 5.57122C11.0772 6.06002 10.7504 6.42442 10.2252 6.42442C10.0821 6.42442 9.89365 6.37285 9.66454 6.31013C9.30915 6.21285 8.85583 6.08877 8.32147 6.08877C7.77352 6.08877 7.36154 6.1735 7.36154 6.52575C7.36154 6.59753 7.38041 6.6668 7.43516 6.75034C7.46374 6.794 7.50331 6.83711 7.55393 6.8783Z"
/>
</svg>
</template>

26
layers/components/atoms/icons/LogoWindow.vue Normal file
View File

@@ -0,0 +1,26 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
}
withDefaults(defineProps<Props>(), {
size: 20,
color: '#ffffff',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 20 20"
:fill="color"
>
<path d="M9.375 3.6375L17.5 2.5V9.6875H9.375V3.6375Z" />
<path d="M8.75 3.725L2.5 4.6V9.6875H8.75V3.725Z" />
<path d="M8.75 10.3125H2.5V15.4L8.75 16.275V10.3125Z" />
<path d="M9.375 16.3625L17.5 17.5V10.3125H9.375V16.3625Z" />
</svg>
</template>

4
layers/types/components/button.ts
View File

@@ -4,5 +4,9 @@ export type ButtonType =
| 'download'
| 'action'
| 'link'
export type DownloadButtonType = 'default' | 'single' | 'duplication'
export type ButtonSize = 'large' | 'medium' | 'small' | 'extra-small'
export type ButtonVariant = 'filled' | 'outlined'

18
public/images/common/btn_system_normal_stove_pc.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="112" height="40" viewBox="0 0 112 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="-30" y="-30" width="172" height="100"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_1_5559_10961_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="30">
<g clip-path="url(#clip0_5559_10961)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1831 3.63647L18.7281 3.64388C21.4204 3.71425 26.0849 4.30463 27.9942 6.18176C28.7845 6.95869 29.1739 7.91843 29.1739 9.15254C29.1739 11.0722 27.8429 12.5033 25.7042 12.5033C25.2876 12.5033 24.7771 12.3999 24.1793 12.2511L22.7671 11.8837L22.1308 11.7261C20.9276 11.4403 19.5256 11.1851 17.9507 11.1851L17.7218 11.1863L17.2771 11.1966C17.1319 11.2019 16.9899 11.2091 16.8515 11.2185L16.4472 11.2534C15.0068 11.407 14.0411 11.8518 14.0411 12.9012C14.0411 13.1831 14.118 13.4552 14.3409 13.7833C14.4282 13.9119 14.5407 14.0392 14.6785 14.1631L14.8333 14.2928C15.0712 14.4908 15.3741 14.667 15.7302 14.8289L16.0482 14.9643L16.3905 15.0937C16.4495 15.1149 16.5095 15.1358 16.5703 15.1566L16.9462 15.279L17.3422 15.3981L17.9706 15.5727L18.8638 15.8033L20.542 16.2246L21.2915 16.4212L21.7971 16.5601L22.3056 16.7066L22.8152 16.8617C22.9001 16.8884 22.985 16.9154 23.0699 16.9428L23.5782 17.1128L24.0834 17.2939C27.7739 18.6658 31.0905 21.0248 31.0905 26.2173C31.0905 33.1189 25.0639 36.3637 17.5787 36.3637C17.2257 36.3637 16.8623 36.3545 16.4915 36.3359L15.9303 36.301L15.3603 36.2519C15.1691 36.2332 14.9769 36.2121 14.7839 36.1887L14.2033 36.1111C9.64445 35.4474 4.90869 33.4603 4.90869 29.965C4.90869 27.9541 6.22787 26.2198 8.36655 26.2198C8.98594 26.2198 9.68327 26.4432 10.4966 26.7546L12.0941 27.3809C13.7367 28.0069 15.7806 28.6525 18.4128 28.6525C21.2224 28.6525 22.5506 28.0554 22.5506 26.8114C22.5506 26.2173 22.3181 25.8787 21.9462 25.5129C21.5245 25.1175 20.9024 24.786 20.1439 24.4806L19.7537 24.3299L19.3424 24.1826L18.9121 24.0375L18.2345 23.8219L15.7708 23.0781L14.9933 22.8338L14.2089 22.5736L13.685 22.3894L13.1624 22.1955C12.728 22.0296 12.2968 21.8525 11.8735 21.6615L11.3697 21.4254C8.20642 19.8853 5.6062 17.4776 5.6062 13.0088C5.6062 7.20421 10.7908 3.63647 18.1831 3.63647Z" fill="#FC4420"/>
<path d="M88.6738 3.25195H96.5038V4.99795H90.7618V8.68795H95.6218V10.452H90.7618V14.736H96.7018V16.5H88.6738V3.25195Z" fill="white"/>
<path d="M76.7266 3.25195H78.9406L80.9026 10.11C81.3526 11.622 81.6226 12.918 82.1086 14.448H82.1986C82.6486 12.918 82.9726 11.622 83.4046 10.11L85.3666 3.25195H87.4906L83.3506 16.5H80.8846L76.7266 3.25195Z" fill="white"/>
<path d="M70.7292 16.734C67.3272 16.734 64.9692 14.088 64.9692 9.822C64.9692 5.556 67.3272 3 70.7292 3C74.1312 3 76.5072 5.556 76.5072 9.822C76.5072 14.088 74.1312 16.734 70.7292 16.734ZM70.7292 14.916C72.9252 14.916 74.3652 12.936 74.3652 9.822C74.3652 6.708 72.9252 4.818 70.7292 4.818C68.5332 4.818 67.1112 6.708 67.1112 9.822C67.1112 12.936 68.5332 14.916 70.7292 14.916Z" fill="white"/>
<path d="M58.4349 4.99795H54.5469V3.25195H64.4289V4.99795H60.5229V16.5H58.4349V4.99795Z" fill="white"/>
<path d="M49.508 16.734C47.69 16.734 46.016 16.014 44.792 14.79L46.016 13.35C46.97 14.304 48.248 14.916 49.544 14.916C51.146 14.916 52.046 14.196 52.046 13.044C52.046 11.838 51.164 11.442 49.922 10.92L48.086 10.128C46.808 9.606 45.386 8.562 45.386 6.654C45.386 4.566 47.222 3 49.742 3C51.326 3 52.748 3.648 53.756 4.674L52.658 6.006C51.812 5.268 50.912 4.818 49.742 4.818C48.374 4.818 47.51 5.448 47.51 6.528C47.51 7.662 48.59 8.094 49.652 8.526L51.47 9.3C53.054 9.966 54.17 10.938 54.17 12.882C54.17 14.988 52.388 16.734 49.508 16.734Z" fill="white"/>
</g>
</g>
<defs>
<clipPath id="bgblur_1_5559_10961_clip_path" transform="translate(30 30)"><path d="M0 8C0 3.58172 3.58172 0 8 0H104C108.418 0 112 3.58172 112 8V32C112 36.4183 108.418 40 104 40H8C3.58172 40 0 36.4183 0 32V8Z"/>
</clipPath><clipPath id="clip0_5559_10961">
<path d="M0 8C0 3.58172 3.58172 0 8 0H104C108.418 0 112 3.58172 112 8V32C112 36.4183 108.418 40 104 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

13
public/images/common/ic-v2-logo-google-playstore-color.svg
View File

@@ -1,13 +0,0 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3298_5174)">
<path d="M17.7524 17.3401L5.04736 30.6226C5.45986 32.0251 6.77986 33.0976 8.34736 33.0976C9.00736 33.0976 9.58486 32.9326 10.0799 32.6026L24.4349 24.4351L17.7524 17.3401Z" fill="#EA4335"/>
<path d="M30.6224 15.03L24.4349 11.4825L17.5049 17.5875L24.5174 24.435L30.7049 20.97C31.7774 20.3925 32.5199 19.2375 32.5199 18C32.4374 16.7625 31.6949 15.6075 30.6224 15.03Z" fill="#FBBC04"/>
<path d="M5.04734 5.37769C4.96484 5.62519 4.96484 5.95519 4.96484 6.28519V29.7977C4.96484 30.1277 4.96484 30.3752 5.04734 30.7052L18.2473 17.7527L5.04734 5.37769Z" fill="#4285F4"/>
<path d="M17.8349 18.0001L24.4349 11.4826L10.1624 3.39759C9.66736 3.06759 9.00736 2.90259 8.34736 2.90259C6.77986 2.90259 5.37736 3.97509 5.04736 5.37759L17.8349 18.0001Z" fill="#34A853"/>
</g>
<defs>
<clipPath id="clip0_3298_5174">
<rect width="33" height="33" fill="white" transform="translate(1.5 1.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

6
public/images/common/ic-v2-logo-window-fill.svg
View File

@@ -1,6 +0,0 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.875 6.5475L31.5 4.5V17.4375H16.875V6.5475Z" fill="white"/>
<path d="M15.75 6.705L4.5 8.28V17.4375H15.75V6.705Z" fill="white"/>
<path d="M15.75 18.5625H4.5V27.72L15.75 29.295V18.5625Z" fill="white"/>
<path d="M16.875 29.4525L31.5 31.5V18.5625H16.875V29.4525Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 390 B