CORE-5076: add videp

oacore · Dec 11, 2024 · c843d75 · c843d75
1 parent 126d8ba
commit c843d75
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 20 deletions.
diff --git a/components/pdf-upload/sdgUploadSuccess.jsx b/components/pdf-upload/sdgUploadSuccess.jsx
@@ -40,19 +40,24 @@ const SdgUploadSuccess = ({
       <div className={styles.innerIssueWrapper}>
         <div className={styles.sdgWrapper}>
           {text.upload.sdgSuccess.description}
-          {uploadResults.map((item) => {
-            const sdgType = sdgTypes.find(
-              (type) => type.id === item.predictions
-            )
-            return (
-              <div className={styles.sdgItem} key={item.predictions}>
-                <div className={styles.imgWrapper}>
-                  <img src={sdgType.icon} alt={sdgType.title} />
+          <div className={styles.innerSdgWrapper}>
+            {uploadResults.map((item) => {
+              const sdgType = sdgTypes.find(
+                (type) => type.id === item.predictions
+              )
+              return (
+                <div className={styles.sdgItem} key={item.predictions}>
+                  <div className={styles.imgWrapper}>
+                    <img src={sdgType.icon} alt={sdgType.title} />
+                  </div>
+                  <div className={styles.scoreText}>
+                    {item.confidence_score}
+                  </div>
+                  <div className={styles.subText}>(confidence)</div>
                 </div>
-                <div>{item.confidence_score}</div>
-              </div>
-            )
-          })}
+              )
+            })}
+          </div>
         </div>
         <input
           ref={uploadRef}

diff --git a/components/pdf-upload/styles.module.scss b/components/pdf-upload/styles.module.scss
@@ -86,7 +86,7 @@
   }
   .inner-issue-wrapper {
     background: #f5f5f5;
-    height: 162px;
+    height: 185px;
     padding: 16px;
     margin: 8px 0;
     .inner-issue-title {
@@ -131,18 +131,40 @@
 
 .sdg-wrapper {
   display: flex;
-  gap: 16px;
-  align-items: center;
+  gap: 14px;
+  flex-direction: column;
+  .inner-sdg-wrapper {
+    display: flex;
+    gap: 16px;
+  }
   .sdg-item {
     display: flex;
     align-items: center;
-    gap: 16px;
+    flex-direction: column;
+    .score-text {
+      color: #212121;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 16px;
+      letter-spacing: 0.024px;
+    }
+    .sub-text {
+      color: #212121;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 16px;
+      letter-spacing: 0.018px;
+      margin-top: 4px;
+    }
   }
 }
 
 .img-wrapper {
-  width: 32px;
-  height: 32px;
+  width: 74px;
+  height: 74px;
+  margin-bottom: 10px;
   img {
     width: 100%;
     height: 100%;

diff --git a/templates/sdg/index.jsx b/templates/sdg/index.jsx
@@ -191,8 +191,8 @@ const SdgPageTemplate = ({ data }) => {
         </article>
       </Section>
       <Video
-        src="https://www.youtube.com/embed/-gFYNg_8ySQ"
-        title="test"
+        src="https://www.youtube.com/embed/_r16dXOGdWA"
+        title="sdg labels"
         tag="p"
       />
     </Layout>