fix: add icon and styling to location

openedx · Oct 17, 2023 · 7356674 · 7356674
1 parent e12a7ba
commit 7356674
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 23 deletions.
diff --git a/src/profile/ProfilePluginPage.jsx b/src/profile/ProfilePluginPage.jsx
@@ -12,7 +12,7 @@ import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-
 import {
   ActionRow, Avatar, Card, Hyperlink, Icon,
 } from '@edx/paragon';
-import { HistoryEdu, VerifiedUser } from '@edx/paragon/icons';
+import { HistoryEdu, LocationOn, VerifiedUser } from '@edx/paragon/icons';
 
 import get from 'lodash.get';
 
@@ -31,8 +31,6 @@ import {
 } from './data/actions';
 
 // Components
-import Bio from './forms/Bio';
-import DateJoined from './DateJoined';
 import PageLoading from './PageLoading';
 
 // Selectors
@@ -172,13 +170,13 @@ class ProfilePluginPage extends React.Component {
             />
           </Card.Section>
           <Card.Footer>
-            <Card.Section className="pgn-icons-cell">
+            <Card.Section className="pgn-icons-cell-vertical">
               <Icon src={VerifiedUser} />
               <p>
                 since <FormattedDate value={new Date(dateJoined)} year="numeric" />
               </p>
             </Card.Section>
-            <Card.Section className="pgn-icons-cell">
+            <Card.Section className="pgn-icons-cell-vertical">
               <Icon src={HistoryEdu} />
               <span>
                 {intl.formatMessage(get(

diff --git a/src/profile/forms/Country.jsx b/src/profile/forms/Country.jsx
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form } from '@edx/paragon';
+import { Form, Icon } from '@edx/paragon';
+import { LocationOn } from '@edx/paragon/icons';
 
 import messages from './Country.messages';
 
@@ -127,12 +128,13 @@ class Country extends React.Component {
       //       </>
       //     ),
       //     static: (
-      <>
+      <div className="pgn-icons-cell-horizontal">
         {/* <EditableItemHeader
           content={intl.formatMessage(messages['profile.country.label'])}
         /> */}
-        <p data-hj-suppress className="h5">{countryMessages[country]}</p>
-      </>
+        <Icon src={LocationOn} />
+        <p className="h5">{countryMessages[country]}</p>
+      </div>
       //     ),
       //   }}
       // />

diff --git a/src/profile/index.scss b/src/profile/index.scss
@@ -163,26 +163,18 @@
     }
   }
 
-  .pgn-icons-cell {
-    padding-top: 15px;
+  .pgn-icons-cell-vertical {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin: 1px;
-    border-radius: 10px;
     width: 150px;
     height: 100px;
-
-    .pgn-icons-cell-text {
-      display: block;
-      font-size: $font-size-xs;
-      padding: 0 5px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      width: 100%;
-      text-align: center;
-    }
+  }
+  .pgn-icons-cell-horizontal {
+    display: flex;
+    flex-direction: row;
+    margin: 1px;
   }
 
 }