Css fixes

Css changes and icon init

samples/react-sites-selected-admin/src/webparts/sitesSelectedManager/components/App.tsx

@@ -7,6 +7,8 @@ import { IService, Service } from '../Service';
 import { IAppProperties } from '../SitesSelectedManagerWebPart';
 import * as strings from 'SitesSelectedManagerWebPartStrings';
 import { AppCheckPermissions } from './AppCheckPermissions';
+import styles from './AppStyles.module.scss';
+import { initializeIcons } from '@uifabric/icons';
 
 interface IMessageBoxProps {
     resetChoice?: () => void;
@@ -30,6 +32,7 @@ export const App: React.FunctionComponent<IAppProperties> = (props) => {
     const [service] = React.useState<IService>(props.context.serviceScope.consume(Service.serviceKey))
 
     React.useEffect(() => {
+        initializeIcons();
         setState({ ...state, showMessage: false });
 
         service.getApps(props.aadGuid)
@@ -87,7 +90,7 @@ export const App: React.FunctionComponent<IAppProperties> = (props) => {
     );
 
     if (state.apps) {
-        return <div>
+        return <div className={styles.sitesSelectedManager}>
             <h1>{props.description}</h1>
             {state.showMessage ? <SitesSelectedMessageBox resetChoice={resetChoice} /> : React.Fragment}
             <Pivot>

samples/react-sites-selected-admin/src/webparts/sitesSelectedManager/components/AppCheckPermissions.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { MessageBarType, Stack, TextField } from 'office-ui-fabric-react';
-import styles from './SitesSelectedManager.module.scss';
+import styles from './AppStyles.module.scss';
 import { IService, Service } from '../Service';
 import * as strings from 'SitesSelectedManagerWebPartStrings';
 import { WebPartContext } from '@microsoft/sp-webpart-base';
@@ -44,7 +44,7 @@ export const AppCheckPermissions: React.FunctionComponent<IAppCheckPermissionsPr
         }
     }, [state.getPerm])
 
-    return <div><h3>{strings.PermCheckTitle}</h3>
+    return <div className={styles.sitesSelectedManager}><h3>{strings.PermCheckTitle}</h3>
         <p><strong>{strings.Info}</strong> {strings.PermCheckHint}</p>
 
         <Stack className={styles.checkPermUi}>

samples/react-sites-selected-admin/src/webparts/sitesSelectedManager/components/AppDialog.tsx

@@ -3,7 +3,7 @@ import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dia
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
 import { MessageBarType, TextField } from 'office-ui-fabric-react';
-import styles from './SitesSelectedManager.module.scss';
+import styles from './AppStyles.module.scss';
 import { IAzureApp, IPermission } from './IAppInterfaces';
 import { IService, Service } from '../Service';
 import * as strings from 'SitesSelectedManagerWebPartStrings';
@@ -61,13 +61,13 @@ export const AppDialog: React.FunctionComponent<IAppDialogProps> = (props) => {
     }, [mode.delete])
 
     const addDialogContentProps = {
-        type: DialogType.largeHeader,
+        type: DialogType.normal,
         title: strings.DialogAddTitle,
         subText: strings.DialogAddSubTitle,
     };
 
     const deleteDialogContentProps = {
-        type: DialogType.largeHeader,
+        type: DialogType.normal,
         title: strings.DialogDelTitle,
         subText: strings.DialogDelSubTitle,
     };

samples/react-sites-selected-admin/src/webparts/sitesSelectedManager/components/AppList.tsx

@@ -3,7 +3,7 @@ import { DetailsList, DetailsListLayoutMode, Selection, IColumn, CheckboxVisibil
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { IAppListItem, IAzureApp } from './IAppInterfaces';
 import { ICommandBarItemProps, CommandBar, MessageBarType } from 'office-ui-fabric-react';
-import styles from './SitesSelectedManager.module.scss';
+import styles from './AppStyles.module.scss';
 import { AppDialog } from './AppDialog';
 import { IObjectWithKey } from '@uifabric/utilities';
 import * as strings from 'SitesSelectedManagerWebPartStrings';

samples/react-sites-selected-admin/src/webparts/sitesSelectedManager/components/AppStyles.module.scss

@@ -28,6 +28,9 @@
 }
 .sitesSelectedManager {
 
+  margin: 1em;
+  border: 1px solid transparent;
+
   font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
   .container {
     max-width: 700px;

samples/react-sites-selected-admin/src/webparts/sitesSelectedManager/loc/en-us.js

@@ -39,9 +39,9 @@ define([], function () {
     "DialogAddSuccess": "Yay! - Permissions successfully added!",
     "DialogRemoveSuccess": "Yay! - Permissions successfully removed!",
 
-    "DialogAddTitle": "Grant access to the selected app to a SharePoint site collection",
+    "DialogAddTitle": "Grant access",
     "DialogAddSubTitle": "Enter a SharePoint site collection URL into the text field and select the wanted access level",
-    "DialogDelTitle": "Remove the access for the selected app to a SharePoint site collection",
+    "DialogDelTitle": "Remove access",
     "DialogDelSubTitle": "Enter a SharePoint site collection URL into the text field and click \"remove\" to remove the access",
 
     "ListCommandBarAdd": "Add app permissions",
@@ -49,7 +49,7 @@ define([], function () {
     "ListColAppName": "App Name",
     "ListColAppId": "Azure AD App Id",
 
-    "PermCheckTitle": "",
+    "PermCheckTitle": "Check Permissions",
     "PermCheckHint": "If the result box shows [] it means there is no permissions granted",