Updates web styling for file recording service sharing option.

config.js

@@ -184,7 +184,11 @@ var config = {
     // by enabling fileRecordingsServiceEnabled, we show both the integrations
     // and the generic recording service (its configuration and storage type
     // depends on jibri configuration)
-    // fileRecordingsServiceEnabled: false
+    // fileRecordingsServiceEnabled: false,
+    // Whether to show the possibility to share file recording with other people
+    // (e.g. meeting participants), based on the actual implementation
+    // on the backend.
+    // fileRecordingsServiceSharingEnabled: false,
 
     // Whether to enable live streaming or not.
     // liveStreamingEnabled: false,

css/_recording.scss

@@ -11,7 +11,7 @@
         flex: 0;
         flex-direction: row;
         justify-content: space-between;
-        margin-top: 32px;
+        padding-top: 32px;
 
         .recording-title {
             display: inline-flex;
@@ -21,6 +21,14 @@
         }
     }
 
+    .recording-header-line {
+        border-top: 1px solid #5e6d7a;
+    }
+
+    .recording-switch-disabled {
+        opacity: 0.5;
+    }
+
     .recording-icon-container {
         display: inline-flex;
         align-items: center;

react/features/recording/components/Recording/StartRecordingDialogContent.js

@@ -167,10 +167,15 @@ class StartRecordingDialogContent extends Component<Props> {
             sharingSetting, t } = this.props;
 
         const controlDisabled = selectedRecordingService !== RECORDING_TYPES.JITSI_REC_SERVICE;
+        let mainContainerClasses = 'recording-header recording-header-line';
+
+        if (controlDisabled) {
+            mainContainerClasses += ' recording-switch-disabled';
+        }
 
         return (
             <Container
-                className = 'recording-header'
+                className = { mainContainerClasses }
                 key = 'fileSharingSetting'
                 style = { [
                     styles.header,