add style

dataesr · Nov 7, 2024 · 46ec4f4 · 46ec4f4
1 parent 99e4119
commit 46ec4f4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/client/src/pages/ror-openalex/modal-info.jsx b/client/src/pages/ror-openalex/modal-info.jsx
@@ -36,13 +36,15 @@ export default function ModalInfo() {
                     <span className="fr-stepper__state">Step 1 of 3</span>
                   </h2>
                   <div className="fr-stepper__steps" data-fr-current-step="1" data-fr-steps="3" />
-                  <Text className="fr-py-3w">
-                    🔎 The array below summarizes the most frequent raw affiliation
-                    strings retrieved in OpenAlex for your query.
-                    <br />
-                    🤖 The second column indicates the ROR automatically computed by
-                    OpenAlex. Sometimes, they can be inaccurate or missing.
-                  </Text>
+                  <div className="box-info">
+                    <Text className="fr-py-3w">
+                      🔎 The array below summarizes the most frequent raw affiliation
+                      strings retrieved in OpenAlex for your query.
+                      <br />
+                      🤖 The second column indicates the ROR automatically computed by
+                      OpenAlex. Sometimes, they can be inaccurate or missing.
+                    </Text>
+                  </div>
                 </>
               )
             }
@@ -54,10 +56,12 @@ export default function ModalInfo() {
                     <span className="fr-stepper__state">Step 2 of 3</span>
                   </h2>
                   <div className="fr-stepper__steps" data-fr-current-step="2" data-fr-steps="3" />
-                  <Text className="fr-py-3w">
-                    ✏️ Click the third column to edit and input the right RORs for
-                    this raw affiliation string. Use a ';' to input multiple RORs.
-                  </Text>
+                  <div className="box-info">
+                    <Text className="fr-py-3w">
+                      ✏️ Click the third column to edit and input the right RORs for
+                      this raw affiliation string. Use a ';' to input multiple RORs.
+                    </Text>
+                  </div>
                 </>
               )
             }
@@ -69,10 +73,12 @@ export default function ModalInfo() {
                     <span className="fr-stepper__state">Step 3 of 3</span>
                   </h2>
                   <div className="fr-stepper__steps" data-fr-current-step="3" data-fr-steps="3" />
-                  <Text className="fr-py-3w">
-                    🗣 Once finished, you can use the Export button on the right to
-                    send this feedback to OpenAlex.
-                  </Text>
+                  <div className="box-info">
+                    <Text className="fr-py-3w">
+                      🗣 Once finished, you can use the Export button on the right to
+                      send this feedback to OpenAlex.
+                    </Text>
+                  </div>
                 </>
               )
             }

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -154,3 +154,12 @@ body {
     text-align: end;
   }
 }
+
+
+.box-info {
+  background-color: #eee;
+  border: 1px solid #000;
+  box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.3);
+  margin: 10px 0;
+  padding: 10px;
+}