Merge pull request #674 from CodeForAfrica/ft/design-updates

Charter Africa Design Update
CodeForAfrica · Feb 29, 2024 · 187754f · 187754f
2 parents 0a2deea + d20dce6
commit 187754f
Show file tree

Hide file tree

Showing 29 changed files with 1,259 additions and 160 deletions.
diff --git a/apps/charterafrica/src/assets/icons/Type=discord, Size=25, Color=Black.svg b/apps/charterafrica/src/assets/icons/Type=discord, Size=25, Color=Black.svg
diff --git a/apps/charterafrica/src/assets/icons/Type=instagram, Size=24, Color=Black.svg b/apps/charterafrica/src/assets/icons/Type=instagram, Size=24, Color=Black.svg
diff --git a/apps/charterafrica/src/assets/icons/Type=telegram, Size=25, Color=Black.svg b/apps/charterafrica/src/assets/icons/Type=telegram, Size=25, Color=Black.svg
diff --git a/apps/charterafrica/src/assets/icons/Type=tiktok, Size=25, Color=Black.svg b/apps/charterafrica/src/assets/icons/Type=tiktok, Size=25, Color=Black.svg
diff --git a/apps/charterafrica/src/assets/icons/Type=whatsapp, Size=25, Color=Black.svg b/apps/charterafrica/src/assets/icons/Type=whatsapp, Size=25, Color=Black.svg
diff --git a/apps/charterafrica/src/assets/icons/Type=youtube, Size=24, Color=Black.svg b/apps/charterafrica/src/assets/icons/Type=youtube, Size=24, Color=Black.svg
diff --git a/apps/charterafrica/src/components/Dataset/Dataset.js b/apps/charterafrica/src/components/Dataset/Dataset.js
@@ -122,6 +122,19 @@ function Dataset({
                 ))}
               </Grid>
             ) : null}
+            <Button
+              variant="contained"
+              color="primary"
+              size="large"
+              startIcon={<ExternalLinkIcon />}
+              href={url}
+              target="_blank"
+              sx={{
+                mt: 4,
+              }}
+            >
+              {labels.openDataset}
+            </Button>
             <RichTypography
               color="common.black"
               order={1}
@@ -163,23 +176,6 @@ function Dataset({
             >
               {labels.backToDatasets}
             </Typography>
-            <Button
-              variant="contained"
-              color="primary"
-              size="medium"
-              startIcon={<ExternalLinkIcon />}
-              href={url}
-              target="_blank"
-              sx={{
-                width: {
-                  xs: "100%",
-                  sm: "200px",
-                },
-                height: "50px",
-              }}
-            >
-              {labels.openDataset}
-            </Button>
             <ShareThisPage
               title={labels.shareDataset}
               sx={{

diff --git a/apps/charterafrica/src/components/Dataset/Dataset.snap.js b/apps/charterafrica/src/components/Dataset/Dataset.snap.js
@@ -55,6 +55,19 @@ exports[`<Dataset /> renders unchanged 1`] = `
               </span>
             </div>
           </div>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge css-11h43d9-MuiButtonBase-root-MuiButton-root"
+            tabindex="0"
+            target="_blank"
+            type="button"
+          >
+            <span
+              class="MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
+            >
+              <div />
+            </span>
+            Open Dataset
+          </button>
           <div
             class="MuiTypography-root MuiTypography-p1 css-iycfiz-MuiTypography-root"
           >
@@ -69,19 +82,6 @@ exports[`<Dataset /> renders unchanged 1`] = `
           >
             Back to Datasets
           </a>
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1scqxyq-MuiButtonBase-root-MuiButton-root"
-            tabindex="0"
-            target="_blank"
-            type="button"
-          >
-            <span
-              class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
-            >
-              <div />
-            </span>
-            Open Dataset
-          </button>
           <div
             class="MuiStack-root css-1xe1uy8-MuiStack-root"
           >