Merge branch 'PBI-2-Deployment' of...

Merge branch 'PBI-2-Deployment' of https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/sosial/pilar/pilar-web into intan/12/tambah-required

src/page/pengguna/DetailPengguna.jsx

@@ -155,98 +155,116 @@ const DetailPengguna = ({ userId }) => {
             {user.username}
           </div>
         </div>
-        <div
-          className="profile"
+        
+        <div className="detailProfile"
+          css={css`
+              background-color: #F2F2F2;
+              border-radius: 15px;
+              padding: 0.5rem 1rem 0.5rem 1rem;
+              margin: 1rem 0 1rem 0;
+          `}>
+          <div 
+            css={css`
+              font-style: normal;
+              font-weight: 300;
+              font-size: 30px;
+              line-height: 44px;
+              border-bottom: 1px solid #C4C4C4;
+              padding-left: 1rem;
+            `}>
+          Detail Profile</div>
+          
+          <div
+          data-testid="detail-profile-test"
+          className="profileDesc"
           css={css`
             font-style: normal;
             font-weight: 300;
-            font-size: 36px;
-            line-height: 44px;
-            margin-top: 1rem;
-          `}
-        >
-          Profil
-        </div>
-        <div
-          className="row mt-2"
-          css={css`
-            margin-top: 1rem;
-            margin-bottom: 1rem;
-          `}
-        >
-          <div className="col-sm-2">
-            <img
-              alt={user.username}
-              className="img-fluid"
-              src={user.profile_picture}
-              css={css`
-                object-fit: cover;
-                width: 150px;
-                height: 150px;
-              `}
-            />
-          </div>
-          <div data-testid="profile" className="col-sm-10">
-            <div
-              css={css`
-                margin-top: 1rem;
-              `}
-            >
-              <PersonIcon style={{ fontSize: 20, color: "FFC80A" }} />
-              <div
-                css={css`
-                  display: inline;
-                  margin-left: 2rem;
-                  font-style: normal;
-                  font-weight: normal;
-                  font-size: 18px;
-                  line-height: 22px;
-                `}
-              >
-                {user.username}
+            font-size: 18px;
+            padding: 1rem;
+          `}>
+          
+            <div className="row" >
+            
+              <div className="col-3" css={css`display: flex; align-items: center;`}>            
+                <PersonIcon style={{ fontSize: 20, color: "FFC80A" }} />
+                <div
+                  css={css`
+                    display: inline;
+                    margin-left: 1rem;
+                    font-style: normal;
+                    font-weight: normal;
+                    font-size: 18px;
+                  `}
+                >
+                  Nama:
+                </div>
+              </div>
+
+              <div className="col-9" 
+                css={css` 
+                font-style: normal;
+                font-weight: normal;
+                `}>
+                {user.full_name}
               </div>
             </div>
-            <div
-              css={css`
-                margin-top: 1rem;
-              `}
-            >
-              <PhoneIcon style={{ fontSize: 20, color: "FFC80A" }} />
+          
+            <div className="row" >
+                
+              <div className="col-3" css={css`display: flex; `}>            
+              <PhoneIcon style={{ fontSize: 23, color: "FFC80A" }} />
               <div
                 css={css`
                   display: inline;
-                  margin-left: 2rem;
+                  margin-left: 1rem;
                   font-style: normal;
                   font-weight: normal;
                   font-size: 18px;
-                  line-height: 22px;
                 `}
               >
+                Nomor HP:
+              </div></div>
+              <div className="col-9" 
+                css={css`
+                font-style: normal;
+                font-weight: normal;`}>
                 {user.phone_number}
               </div>
             </div>
-            <div
-              css={css`
-                margin-top: 1rem;
-              `}
-            >
-              <LocationOnIcon style={{ fontSize: 20, color: "FFC80A" }} />
-              <div
+
+            <div className="row" >
+                
+              <div className="col-3" css={css`display: flex; `}>            
+                <LocationOnIcon style={{ fontSize: 23, color: "FFC80A"}} />
+                <div
+                  css={css`
+                    display: inline;
+                    margin-left: 1rem;
+                    font-style: normal;
+                    font-weight: normal;
+                    font-size: 18px;
+                  `}
+                >
+                  Alamat:
+                </div>
+              </div>
+              <div className="col-9" 
                 css={css`
-                  display: inline;
-                  margin-left: 2rem;
-                  font-style: normal;
-                  font-weight: normal;
-                  font-size: 18px;
-                  line-height: 22px;
-                `}
-              >
+                font-style: normal;
+                font-weight: normal;`}>
                 {user.address}, RT {user.neighborhood}, RW {user.hamlet},
                 Kelurahan {user.urban_village}, Kecamatan {user.sub_district}
               </div>
             </div>
+
+
+
+
           </div>
+
         </div>
+        
         <div
           css={css`
             font-style: normal;