frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

style(#2831): change switch-icon for lff platform

Browse Source
keep-around/2fd168b18eeebc91eac94ae86d817c12edfe1576
Andrei Dekterev 3 years ago
parent 8c3f91274e
commit 2fd168b18e
4 changed files with 24 additions and 21 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 20
      public/images/score-switch-lff-off.svg
  2. 20
      public/images/score-switch-lff-on.svg
  3. 3
      src/features/MatchSwitches/components/ScoreSwitch/index.tsx
  4. 2
      src/features/Menu/styled.tsx

20
public/images/score-switch-lff-off.svg
Unescape View File

@ -1,22 +1,22 @@
<svg width="100%" height="100%" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M31 18H11C7.1 18 4 14.9 4 11C4 7.1 7.1 4 11 4H31C34.9 4 38 7.1 38 11C38 14.9 34.9 18 31 18Z" fill="#B8C1CC" fill-opacity="0.3"/>
<g filter="url(#filter0_dd)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" fill="#B8C1CC"/>
<svg width="58" height="48" viewBox="0 0 58 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38 31H18C14.1 31 11 27.9 11 24C11 20.1 14.1 17 18 17H38C41.9 17 45 20.1 45 24C45 27.9 41.9 31 38 31Z" fill="white" fill-opacity="0.4"/>
<g filter="url(#filter0_dd_26422_217456)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 34C23.5228 34 28 29.5228 28 24C28 18.4772 23.5228 14 18 14C12.4772 14 8 18.4772 8 24C8 29.5228 12.4772 34 18 34Z" fill="#E1E1E1"/>
</g>
<defs>
<filter id="filter0_dd" x="0" y="0" width="22" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter0_dd_26422_217456" x="7" y="13" width="22" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.237602 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_26422_217456"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
<feBlend mode="normal" in2="effect1_dropShadow_26422_217456" result="effect2_dropShadow_26422_217456"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_26422_217456" result="shape"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

20
public/images/score-switch-lff-on.svg
Unescape View File

@ -1,22 +1,22 @@
<svg width="100%" height="100%" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="1" d="M27 18H7C3.1 18 0 14.9 0 11C0 7.1 3.1 4 7 4H27C30.9 4 34 7.1 34 11C34 14.9 30.9 18 27 18Z" fill="#1D1D1D"/>
<g filter="url(#filter0_dd)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27 21C32.5228 21 37 16.5228 37 11C37 5.47715 32.5228 1 27 1C21.4772 1 17 5.47715 17 11C17 16.5228 21.4772 21 27 21Z" fill="#B8C1CC"/>
<svg width="58" height="48" viewBox="0 0 58 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 17L35 17C38.9 17 42 20.1 42 24C42 27.9 38.9 31 35 31L15 31C11.1 31 8 27.9 8 24C8 20.1 11.1 17 15 17Z" fill="#1D1D1D"/>
<g filter="url(#filter0_dd_26422_217523)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35 14C29.4772 14 25 18.4772 25 24C25 29.5228 29.4772 34 35 34C40.5228 34 45 29.5228 45 24C45 18.4772 40.5228 14 35 14Z" fill="#E1E1E1"/>
</g>
<defs>
<filter id="filter0_dd" x="16" y="0" width="22" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<filter id="filter0_dd_26422_217523" x="24" y="13" width="22" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.237602 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_26422_217523"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
<feBlend mode="normal" in2="effect1_dropShadow_26422_217523" result="effect2_dropShadow_26422_217523"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_26422_217523" result="shape"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

3
src/features/MatchSwitches/components/ScoreSwitch/index.tsx
Unescape View File

@ -2,6 +2,7 @@ import { isMobileDevice } from 'config/userAgent'
import { useMatchSwitchesStore } from 'features/MatchSwitches'
import { getSwitchScoreIconName } from 'helpers/getSwitchScoreIconName'
import { client } from 'config/clients'
import {
Switch,
Title,
@ -23,6 +24,8 @@ export const ScoreSwitch = () => {
<Icon
iconName={getSwitchScoreIconName()}
isOn={!isScoreHidden}
height={client.name === 'lff' ? 2.5 : 1.7}
width={client.name === 'lff' ? 3.4 : 2.28}
/>
</Switch>
</Wrapper>

2
src/features/Menu/styled.tsx
Unescape View File

@ -47,7 +47,7 @@ export const Icon = styled.div<IconProps>`
background-repeat: no-repeat;
background-position: center;
background-size: ${({ size }) => size};
opacity: 0.8;
opacity: 0.7;
${isMobileDevice
? css`
height: 14px;

Write Preview
Loading…
Cancel
Save