code refactoring, localization of used strings, theme-based colors in CSS

Author: AJIXuMuK

src/controls/dynamicForm/DynamicForm.module.scss

@@ -1,71 +1,86 @@
+@import "~office-ui-fabric-react/dist/sass/References.scss";
+
 .FieldEditor {
-    padding: 4px 3px;
+	padding: 4px 3px;
 }
 
 .fieldLabel {
-    font-weight           : 600;
-    font-size             : 12px;
-    padding-top           : 5px;
-    padding-bottom        : 5px;
-    font-family           : "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-    -webkit-font-smoothing: antialiased;
-    font-size             : 14px;
-    font-weight           : 600;
-    color                 : rgb(50, 49, 48);
-    box-sizing            : border-box;
-    box-shadow            : none;
-    margin                : 0px;
-    padding               : 5px 0px;
-    overflow-wrap         : break-word;
+	font-weight: 600;
+	font-size: 12px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
+		"Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	font-size: 14px;
+	font-weight: 600;
+	color: "[theme:neutralPrimary, default:#323130]";
+	box-sizing: border-box;
+	box-shadow: none;
+	margin: 0px;
+	padding: 5px 0px;
+	overflow-wrap: break-word;
 }
 
 .fieldIcon {
-    align-self  : center;
-    font-size   : 13px;
-    color       : #605e5c;
-    margin-right: 8px;
+	align-self: center;
+	font-size: 13px;
+	color: "[theme:neutralSecondary, default: #605e5c]";
+	margin-right: 8px;
 }
 
 .feildDisplay {
-    display       : inline-block;
-    vertical-align: top;
-    width         : 100%;
-    font-size     : 14px;
-    font-weight   : 400;
-    outline       : 0;
-    padding       : 6px 0 7px 0;
-    border        : 2px solid #ffffff;
-    margin-left   : -2px;
+	display: inline-block;
+	vertical-align: top;
+	width: 100%;
+	font-size: 14px;
+	font-weight: 400;
+	outline: 0;
+	padding: 6px 0 7px 0;
+	border: 2px solid;
+  border-color: "[theme:white, default:#ffffff]";
+	margin-left: -2px;
 }
 
 .fieldRequired::after {
-    content      : " *";
-    color        : rgb(164, 38, 44);
-    padding-right: 12px;
+	content: " *";
+	color: "[theme:errorText, default:#a4262c]";
+	padding-right: 12px;
 }
 
 .buttons {
-    padding: 15px 4px;
+	padding: 15px 4px;
+}
+
+.filePicker {
+	padding: 7px;
+	align-items: center;
+}
+
+.errormessage {
+	animation-duration: 0.367s;
+	animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+	animation-fill-mode: both;
+	font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
+		"Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	font-size: 12px;
+	font-weight: 400;
+	color: "[theme:errorText, default:#a4262c]";
+	margin: 0px;
+	padding-top: 5px;
+	display: flex;
+	align-items: center;
+}
+
+.fieldContainer {
+  padding-bottom: 4px;
 }
 
-.filePicker
-{
-    padding: 7px;
-    align-items: center;
+.labelContainer {
+  padding-bottom: 7px;
 }
 
-.errormessage{
-    animation-name: css-102, css-115;
-    animation-duration: 0.367s;
-    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
-    animation-fill-mode: both;
-    font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-    -webkit-font-smoothing: antialiased;
-    font-size: 12px;
-    font-weight: 400;
-    color: rgb(164, 38, 44);
-    margin: 0px;
-    padding-top: 5px;
-    display: flex;
-    align-items: center;
-}
+.pickersContainer {
+  padding: 6px 0 7px;
+}