Wrap inputs in fieldsets in Space visibility settings (#7350)

* use fieldset in space settings > visibility

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add basic tests for space setttings visibility

Signed-off-by: Kerry Archibald <kerrya@element.io>

* i18n

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix toggle button placement

Signed-off-by: Kerry Archibald <kerrya@element.io>

* i18n

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update settings separator color to quinary

Signed-off-by: Kerry Archibald <kerrya@element.io>

test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest access section toggle 1`] = `
+<div
+  aria-checked="true"
+  aria-disabled="false"
+  aria-label="Enable guest access"
+  class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+  role="switch"
+  tabindex="0"
+>
+  <div
+    class="mx_ToggleSwitch_ball"
+  />
+</div>
+`;
+
+exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
+<div
+  class="mx_SettingsTab"
+>
+  <div
+    class="mx_SettingsTab_heading"
+  >
+    Visibility
+  </div>
+  
+  <fieldset
+    class="mx_SettingsFieldset"
+    data-test-id="access-fieldset"
+  >
+    <legend
+      class="mx_SettingsFieldset_legend"
+    >
+      Access
+    </legend>
+    <div
+      class="mx_SettingsFieldset_description"
+    >
+      Decide who can view and join mock-space.
+    </div>
+    <label
+      class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
+    >
+      <input
+        aria-describedby="joinRule-invite-description"
+        checked=""
+        disabled=""
+        id="joinRule-invite"
+        name="joinRule"
+        type="radio"
+        value="invite"
+      />
+      <div>
+        <div />
+      </div>
+      <div
+        class="mx_StyledRadioButton_content"
+      >
+        Private (invite only)
+      </div>
+      <div
+        class="mx_StyledRadioButton_spacer"
+      />
+    </label>
+    <span
+      id="joinRule-invite-description"
+    >
+      Only invited people can join.
+    </span>
+    <label
+      class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled"
+    >
+      <input
+        aria-describedby="joinRule-public-description"
+        disabled=""
+        id="joinRule-public"
+        name="joinRule"
+        type="radio"
+        value="public"
+      />
+      <div>
+        <div />
+      </div>
+      <div
+        class="mx_StyledRadioButton_content"
+      >
+        Public
+      </div>
+      <div
+        class="mx_StyledRadioButton_spacer"
+      />
+    </label>
+    <span
+      id="joinRule-public-description"
+    >
+      Anyone can find and join.
+    </span>
+    <div
+      class="mx_SettingsTab_toggleWithDescription"
+    >
+      <div
+        class="mx_SettingsFlag "
+      >
+        <span
+          class="mx_SettingsFlag_label"
+        >
+          Preview Space
+        </span>
+        <div
+          aria-checked="true"
+          aria-disabled="false"
+          aria-label="Preview Space"
+          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+          role="switch"
+          tabindex="0"
+        >
+          <div
+            class="mx_ToggleSwitch_ball"
+          />
+        </div>
+      </div>
+      <p>
+        Allow people to preview your space before they join.
+        <br />
+        <b>
+          Recommended for public spaces.
+        </b>
+      </p>
+    </div>
+  </fieldset>
+</div>
+`;