From 9cd8043f94f8952b56cb733aad8932c1222a994c Mon Sep 17 00:00:00 2001
From: AriGunawan <ari.gunawan.3023@gmail.com>
Date: Fri, 28 Jul 2023 23:40:18 +0700
Subject: [PATCH] Add base layout

---
 .../EnhancedPageProperties.module.scss        | 48 ++++++++--------
 .../components/EnhancedPageProperties.tsx     | 55 ++++++-------------
 2 files changed, 39 insertions(+), 64 deletions(-)

diff --git a/samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.module.scss b/samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.module.scss
index 70f84cfdd..9bd832434 100644
--- a/samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.module.scss
+++ b/samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.module.scss
@@ -1,34 +1,32 @@
-@import '~@fluentui/react/dist/sass/References.scss';
-
 .enhancedPageProperties {
-  overflow: hidden;
-  padding: 1em;
-  color: "[theme:bodyText, default: #323130]";
-  color: var(--bodyText);
-  &.teams {
-    font-family: $ms-font-family-fallbacks;
+  h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-top: 0;
+    margin-bottom: 18px;
   }
-}
 
-.welcome {
-  text-align: center;
-}
+  .content {
+    display: grid;
+    gap: 20px;
 
-.welcomeImage {
-  width: 100%;
-  max-width: 420px;
-}
+    .item {
+      h3 {
+        font-size: 17px;
+        font-weight: 300;
+        margin-top: 0;
+        margin-bottom: 10px;
+      }
 
-.links {
-  a {
-    text-decoration: none;
-    color: "[theme:link, default:#03787c]";
-    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
+      span {
+        background-color: #fafafa;
+        padding: 8px 13px;
+        display: block;
 
-    &:hover {
-      text-decoration: underline;
-      color: "[theme:linkHovered, default: #014446]";
-      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
+        &:hover {
+          background-color: #f0f0f0;
+        }
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.tsx b/samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.tsx
index cf1f26111..c635c71bc 100644
--- a/samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.tsx
+++ b/samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.tsx
@@ -1,43 +1,20 @@
-import * as React from 'react';
-import styles from './EnhancedPageProperties.module.scss';
-import { IEnhancedPagePropertiesProps } from './IEnhancedPagePropertiesProps';
-import { escape } from '@microsoft/sp-lodash-subset';
+import * as React from "react";
+import styles from "./EnhancedPageProperties.module.scss";
 
-export default class EnhancedPageProperties extends React.Component<IEnhancedPagePropertiesProps, {}> {
-  public render(): React.ReactElement<IEnhancedPagePropertiesProps> {
-    const {
-      description,
-      isDarkTheme,
-      environmentMessage,
-      hasTeamsContext,
-      userDisplayName
-    } = this.props;
-
-    return (
-      <section className={`${styles.enhancedPageProperties} ${hasTeamsContext ? styles.teams : ''}`}>
-        <div className={styles.welcome}>
-          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
-          <h2>Well done, {escape(userDisplayName)}!</h2>
-          <div>{environmentMessage}</div>
-          <div>Web part property value: <strong>{escape(description)}</strong></div>
+export default function EnhancedPageProperties(): JSX.Element {
+  return (
+    <section className={styles.enhancedPageProperties}>
+      <h2>Site Scope</h2>
+      <div className={styles.content}>
+        <div className={styles.item}>
+          <h3>Function</h3>
+          <span>COMMUNICAITONS AND STAKEHOLDER</span>
         </div>
-        <div>
-          <h3>Welcome to SharePoint Framework!</h3>
-          <p>
-            The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It&#39;s the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
-          </p>
-          <h4>Learn more about SPFx development:</h4>
-          <ul className={styles.links}>
-            <li><a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">SharePoint Framework Overview</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank" rel="noreferrer">Use Microsoft Graph in your solution</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank" rel="noreferrer">Build for Microsoft Teams using SharePoint Framework</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank" rel="noreferrer">Build for Microsoft Viva Connections using SharePoint Framework</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-store" target="_blank" rel="noreferrer">Publish SharePoint Framework applications to the marketplace</a></li>
-            <li><a href="https://aka.ms/spfx-yeoman-api" target="_blank" rel="noreferrer">SharePoint Framework API reference</a></li>
-            <li><a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">Microsoft 365 Developer Community</a></li>
-          </ul>
+        <div className={styles.item}>
+          <h3>Activity</h3>
+          <span>Advertising and Communications</span>
         </div>
-      </section>
-    );
-  }
+      </div>
+    </section>
+  );
 }