From 9fe802ffc43546cc79090a97ac192738854c07be Mon Sep 17 00:00:00 2001 From: Filip Stoyanov Date: Wed, 30 Oct 2024 22:53:12 +0000 Subject: [PATCH] filip(fix): wallet downloaders styling adjustment --- src/components/WalletDownloaders.tsx | 259 ++++++++++++++------------- 1 file changed, 133 insertions(+), 126 deletions(-) diff --git a/src/components/WalletDownloaders.tsx b/src/components/WalletDownloaders.tsx index 7ebc2474..af8884be 100644 --- a/src/components/WalletDownloaders.tsx +++ b/src/components/WalletDownloaders.tsx @@ -34,15 +34,20 @@ const Container = styled.div` display: flex; flex-direction: row; justify-content: center; - flex-wrap: wrap; + /* flex-wrap: wrap; */ gap: 0.5rem; @media (max-width: 767px) { flex-direction: column; } + + @media (max-width: 1240px) and (min-width: 1030px) { + display: grid; + grid-template-columns: 1fr 1fr; + } ` -const DownloadBox = styled(Box)` +const DownloadBox = styled.div` padding: 1.5rem 1rem 1.25rem 1rem; background-color: var(--controls-background-color); border-radius: 4px; @@ -50,6 +55,11 @@ const DownloadBox = styled(Box)` font-family: 'Chivo'; font-weight: 400; line-height: 1.375rem; + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + text-align: center; a { display: flex; @@ -69,12 +79,13 @@ const MainLabel = styled.span` padding-bottom: 0.25rem; ` -const DownloadButton = styled(MuiButton)` +const DownloadButton = styled.a` font-family: 'Chivo'; font-style: normal; font-weight: 400; line-height: 1.375rem; - color: #fff; + color: #fff !important; + text-decoration: none !important; display: flex; padding: 0.5rem 1rem; justify-content: center; @@ -159,124 +170,124 @@ const WalletDownloaders = ({ env }) => { }, } - const [platformsData, setPlatformsData] = useState(null) + // const [platformsData, setPlatformsData] = useState(null) - const [loading, setLoading] = useState(true) + // const [loading, setLoading] = useState(true) - const [hasError, setHasError] = useState(false) + // const [hasError, setHasError] = useState(false) const [activeModal, setActiveModal] = useState('') - const checksumRefs = { - windows: useRef(null), - darwin: useRef(null), - linux: useRef(null), - } - - const validateData = (data) => { - if (!data.platforms) return false - const validPlatforms = ['windows', 'darwin', 'linux'] - - if (Object.keys(data.platforms).length !== validPlatforms.length) - return false - let valid = true - - validPlatforms.forEach((platform) => { - if (!data.platforms[platform]) { - valid = false - } else { - const validKeys = ['signature', 'hash', 'URL', 'version', 'SHA256'] - - if (Object.keys(data.platforms[platform]).length !== validKeys.length) { - valid = false - } else { - validKeys.forEach((key) => { - if ( - typeof data.platforms[platform][key] !== 'string' || - !data.platforms[platform][key] - ) - valid = false - }) - } - } - }) - - return valid - } + // const checksumRefs = { + // windows: useRef(null), + // darwin: useRef(null), + // linux: useRef(null), + // } - const loadDaedalusData = async () => { - try { - setLoading(true) - - const result = await fetch(envs[env].endpoint) - - const jsonResult = await result.json() - if (!validateData(jsonResult)) throw new Error('Invalid data') - setPlatformsData( - Object.keys(jsonResult.platforms).map((platform) => ({ - ...jsonResult.platforms[platform], - key: platform, - })), - ) - setLoading(false) - } catch (error) { - console.error(error.message, error) - setHasError(true) - setLoading(false) - } - } + // const validateData = (data) => { + // if (!data.platforms) return false + // const validPlatforms = ['windows', 'darwin', 'linux'] + + // if (Object.keys(data.platforms).length !== validPlatforms.length) + // return false + // let valid = true + + // validPlatforms.forEach((platform) => { + // if (!data.platforms[platform]) { + // valid = false + // } else { + // const validKeys = ['signature', 'hash', 'URL', 'version', 'SHA256'] + + // if (Object.keys(data.platforms[platform]).length !== validKeys.length) { + // valid = false + // } else { + // validKeys.forEach((key) => { + // if ( + // typeof data.platforms[platform][key] !== 'string' || + // !data.platforms[platform][key] + // ) + // valid = false + // }) + // } + // } + // }) + + // return valid + // } - useEffect(() => { - loadDaedalusData() - }, []) + // const loadDaedalusData = async () => { + // try { + // setLoading(true) + + // const result = await fetch(envs[env].endpoint) + + // const jsonResult = await result.json() + // if (!validateData(jsonResult)) throw new Error('Invalid data') + // setPlatformsData( + // Object.keys(jsonResult.platforms).map((platform) => ({ + // ...jsonResult.platforms[platform], + // key: platform, + // })), + // ) + // setLoading(false) + // } catch (error) { + // console.error(error.message, error) + // setHasError(true) + // setLoading(false) + // } + // } - const getOrderedPlatforms = (order) => { - const platforms = [] + // useEffect(() => { + // loadDaedalusData() + // }, []) - order.forEach((platform) => { - platforms.push( - platformsData.filter(({ key }) => platform === key).shift(), - ) - }) + // const getOrderedPlatforms = (order) => { + // const platforms = [] - return platforms.filter((platform) => Boolean(platform)) - } + // order.forEach((platform) => { + // platforms.push( + // platformsData.filter(({ key }) => platform === key).shift(), + // ) + // }) - const checksumOnClick = (SHA256, platform) => (e) => { - e.preventDefault() - const el = checksumRefs[platform].current + // return platforms.filter((platform) => Boolean(platform)) + // } - if (!el) return - el.select() - el.setSelectionRange(0, SHA256.length) - navigator.clipboard.writeText(SHA256) - } + // const checksumOnClick = (SHA256, platform) => (e) => { + // e.preventDefault() + // const el = checksumRefs[platform].current - const openModal = (name) => (e) => { - e.preventDefault() - setActiveModal(name) - } + // if (!el) return + // el.select() + // el.setSelectionRange(0, SHA256.length) + // navigator.clipboard.writeText(SHA256) + // } - const getFilename = (URL) => URL.replace(/^.*\/(.*?)$/, '$1') + // const openModal = (name) => (e) => { + // e.preventDefault() + // setActiveModal(name) + // } - const renderTemplateString = ( - content, - { SHA256, URL, version, hash, signature }, - ) => { - const params = { - sha256: 'SHA256 checksum', - version: '6.0.1', - hash: '9bf726789218098', - signature: 'signatrue', - filename: 'dummy', - } + // const getFilename = (URL) => URL.replace(/^.*\/(.*?)$/, '$1') + + // const renderTemplateString = ( + // content, + // { SHA256, URL, version, hash, signature }, + // ) => { + // const params = { + // sha256: 'SHA256 checksum', + // version: '6.0.1', + // hash: '9bf726789218098', + // signature: 'signatrue', + // filename: 'dummy', + // } - return content.replace(/{{\s?([^}\s]+)\s?}}/g, (original, key) => { - return params[key] || original - }) - } + // return content.replace(/{{\s?([^}\s]+)\s?}}/g, (original, key) => { + // return params[key] || original + // }) + // } - const getPGPFilename = (URL) => `${getFilename(URL)}.asc` + // const getPGPFilename = (URL) => `${getFilename(URL)}.asc` // const getPGPBlob = (signature) => { // if (window) { @@ -344,38 +355,32 @@ const WalletDownloaders = ({ env }) => { full_label, short_label, }) => ( - + {full_label} {version}: {version} - + {short_label} {'SHA256 checksum'} - + {/* */} + { - + {/* */} + @@ -418,7 +424,7 @@ const WalletDownloaders = ({ env }) => { { - + {/* */} + @@ -452,14 +459,14 @@ const WalletDownloaders = ({ env }) => { {/* )} */} - {loading && ( + {/* {loading && (
- )} - {hasError && ( + )} */} + {/* {hasError && ( @@ -468,7 +475,7 @@ const WalletDownloaders = ({ env }) => { {content.downloaders_content.no_releases_available} - )} + )} */} ) }