Progress

app/javascript/gabsocial/components/modal/group_members_modal.js

@@ -0,0 +1,32 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ModalLayout from './modal_layout'
+import GroupCreate from '../../features/group_create'
+
+const messages = defineMessages({
+  title: { id: 'create_group', defaultMessage: 'Create group' },
+})
+
+export default
+@injectIntl
+class GroupMembersModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const { intl, onClose } = this.props
+
+    return (
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width={440}
+        onClose={onClose}
+      >
+        <GroupCreate onCloseModal={onClose} />
+      </ModalLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/media_modal/media_modal.scss

@@ -1,103 +0,0 @@
-.media-modal {
-  position: relative;
-
-  @include size(100%);
-
-  &__closer {
-    @include abs-position(0, 0, 0, 0);
-  }
-
-  &__navigation {
-    pointer-events: none;
-    transition: opacity 0.3s linear;
-    will-change: opacity;
-
-    @include abs-position(0, 0, 0, 0);
-
-    * {
-      pointer-events: auto;
-    }
-
-    &.media-modal__navigation--hidden {
-      opacity: 0;
-
-      * {
-        pointer-events: none;
-      }
-    }
-  }
-
-  &__nav {
-    background: rgba($base-overlay-background, 0.5);
-    box-sizing: border-box;
-    border: 0;
-    color: $primary-text-color;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    font-size: 24px;
-    height: 20vmax;
-    margin: auto 0;
-    padding: 30px 15px;
-
-    @include abs-position(0, auto, 0, auto);
-
-    &--left {
-      left: 0;
-    }
-
-    &--right {
-      right: 0;
-    }
-  }
-
-  &__meta,
-  &__pagination {
-    width: 100%;
-    text-align: center;
-    pointer-events: none;
-
-    @include abs-position(auto, auto, 20px, 0);
-  }
-
-  &__meta {
-    &--shifted {
-      bottom: 62px;
-    }
-
-    a {
-      text-decoration: none;
-      font-weight: 500;
-      color: $ui-secondary-color;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &__page-dot {
-    display: inline-block;
-  }
-
-  &__button {
-    background-color: $primary-text-color;
-    border-radius: 6px;
-    margin: 10px;
-    padding: 0;
-    border: 0;
-    font-size: 0;
-
-    @include size(12px);
-
-    &--active {
-      background-color: $highlight-text-color;
-    }
-  }
-
-  &__close {
-    @include abs-position(8px, 8px);
-  }
-}

app/javascript/gabsocial/components/modal/modal_root.js

@@ -18,6 +18,7 @@ import {
   MODAL_GROUP_CREATE,
   MODAL_GROUP_DELETE,
   MODAL_GROUP_EDITOR,
+  MODAL_GROUP_MEMBERS,
   MODAL_HASHTAG_TIMELINE_SETTINGS,
   MODAL_HOME_TIMELINE_SETTINGS,
   MODAL_HOTKEYS,
@@ -51,6 +52,7 @@ import {
   GroupCreateModal,
   GroupDeleteModal,
   GroupEditorModal,
+  GroupMembersModal,
   HashtagTimelineSettingsModal,
   HomeTimelineSettingsModal,
   HotkeysModal,
@@ -85,6 +87,7 @@ MODAL_COMPONENTS[MODAL_GIF_PICKER] = GifPickerModal
 MODAL_COMPONENTS[MODAL_GROUP_CREATE] = GroupCreateModal
 MODAL_COMPONENTS[MODAL_GROUP_DELETE] = GroupDeleteModal
 MODAL_COMPONENTS[MODAL_GROUP_EDITOR] = GroupEditorModal
+MODAL_COMPONENTS[MODAL_GROUP_MEMBERS] = GroupMembersModal
 MODAL_COMPONENTS[MODAL_HASHTAG_TIMELINE_SETTINGS] = HashtagTimelineSettingsModal
 MODAL_COMPONENTS[MODAL_HOME_TIMELINE_SETTINGS] = HomeTimelineSettingsModal
 MODAL_COMPONENTS[MODAL_HOTKEYS] = HotkeysModal
@@ -156,6 +159,8 @@ class ModalRoot extends PureComponent {
     const { type, props } = this.props
     const visible = !!type
 
+    // : todo : init card view if mobile
+
     return (
       <ModalBase onClose={this.onClickClose} type={type}>
         {