diff options
author | 2021-12-13 20:40:58 +0100 | |
---|---|---|
committer | 2021-12-13 20:40:58 +0100 | |
commit | a069539d4bcff4cbe99d1bff9e413129d7600b21 (patch) | |
tree | 14e3942f56b32b09fbf07432800c6e13d5b8b29c /src/features/publishDebugInfo/Component.js | |
parent | New Crowdin updates (#2320) [skip ci] (diff) | |
download | ferdium-app-a069539d4bcff4cbe99d1bff9e413129d7600b21.tar.gz ferdium-app-a069539d4bcff4cbe99d1bff9e413129d7600b21.tar.zst ferdium-app-a069539d4bcff4cbe99d1bff9e413129d7600b21.zip |
Style modals as per QuickSwitch modal
Diffstat (limited to 'src/features/publishDebugInfo/Component.js')
-rw-r--r-- | src/features/publishDebugInfo/Component.js | 140 |
1 files changed, 62 insertions, 78 deletions
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js index 5ffe535e0..8bdb50cb4 100644 --- a/src/features/publishDebugInfo/Component.js +++ b/src/features/publishDebugInfo/Component.js | |||
@@ -8,7 +8,7 @@ import { state as ModalState } from './store'; | |||
8 | import { H1 } from '../../components/ui/headline'; | 8 | import { H1 } from '../../components/ui/headline'; |
9 | import { sendAuthRequest } from '../../api/utils/auth'; | 9 | import { sendAuthRequest } from '../../api/utils/auth'; |
10 | import Button from '../../components/ui/Button'; | 10 | import Button from '../../components/ui/Button'; |
11 | import Input from '../../components/ui/Input'; | 11 | import { Input } from '../../components/ui/input/index'; |
12 | import Modal from '../../components/ui/Modal'; | 12 | import Modal from '../../components/ui/Modal'; |
13 | import { DEBUG_API } from '../../config'; | 13 | import { DEBUG_API } from '../../config'; |
14 | import AppStore from '../../stores/AppStore'; | 14 | import AppStore from '../../stores/AppStore'; |
@@ -50,11 +50,19 @@ const messages = defineMessages({ | |||
50 | }); | 50 | }); |
51 | 51 | ||
52 | const styles = theme => ({ | 52 | const styles = theme => ({ |
53 | container: { | 53 | modal: { |
54 | minWidth: '70vw', | 54 | width: '80%', |
55 | maxWidth: 600, | ||
56 | background: theme.styleTypes.primary.contrast, | ||
57 | color: theme.styleTypes.primary.accent, | ||
58 | paddingTop: 30, | ||
59 | }, | ||
60 | headline: { | ||
61 | fontSize: 20, | ||
62 | marginBottom: 20, | ||
63 | marginTop: -27, | ||
55 | }, | 64 | }, |
56 | info: { | 65 | info: { |
57 | paddingTop: 20, | ||
58 | paddingBottom: 20, | 66 | paddingBottom: 20, |
59 | }, | 67 | }, |
60 | link: { | 68 | link: { |
@@ -67,22 +75,6 @@ const styles = theme => ({ | |||
67 | marginTop: 10, | 75 | marginTop: 10, |
68 | cursor: 'pointer', | 76 | cursor: 'pointer', |
69 | }, | 77 | }, |
70 | url: { | ||
71 | marginTop: 20, | ||
72 | width: '100%', | ||
73 | |||
74 | '& div': { | ||
75 | fontFamily: | ||
76 | 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', | ||
77 | }, | ||
78 | |||
79 | '& input': { | ||
80 | width: '100%', | ||
81 | padding: 15, | ||
82 | borderRadius: 6, | ||
83 | border: `solid 1px ${theme.styleTypes.primary.accent}`, | ||
84 | }, | ||
85 | }, | ||
86 | }); | 78 | }); |
87 | 79 | ||
88 | class PublishDebugLogModal extends Component { | 80 | class PublishDebugLogModal extends Component { |
@@ -156,66 +148,58 @@ class PublishDebugLogModal extends Component { | |||
156 | isOpen={isModalVisible} | 148 | isOpen={isModalVisible} |
157 | shouldCloseOnOverlayClick | 149 | shouldCloseOnOverlayClick |
158 | className={`${classes.modal} publish-debug`} | 150 | className={`${classes.modal} publish-debug`} |
159 | classes={{close: 'close'}} | ||
160 | close={() => this.close()} | 151 | close={() => this.close()} |
161 | > | 152 | > |
162 | <div className={classes.container}> | 153 | <H1 className={classes.headline}>{intl.formatMessage(messages.title)}</H1> |
163 | <H1>{intl.formatMessage(messages.title)}</H1> | 154 | {log && ( |
164 | {log && ( | 155 | <> |
165 | <> | 156 | <p className={classes.info}> |
166 | <p className={classes.info}> | 157 | {intl.formatMessage(messages.published)} |
167 | {intl.formatMessage(messages.published)} | 158 | </p> |
168 | </p> | 159 | <Input |
169 | <Input | 160 | showLabel={false} |
170 | className={classes.url} | 161 | value={`${DEBUG_API}/${log}`} |
171 | showLabel={false} | 162 | readonly |
172 | field={{ | 163 | /> |
173 | type: 'url', | 164 | </> |
174 | value: `${DEBUG_API}/${log}`, | 165 | )} |
175 | disabled: true, | 166 | |
176 | }} | 167 | {error && ( |
177 | readonly | 168 | <p className={classes.info}>{intl.formatMessage(messages.error)}</p> |
178 | /> | 169 | )} |
179 | </> | 170 | |
180 | )} | 171 | {!log && !error && ( |
181 | 172 | <> | |
182 | {error && ( | 173 | <p className={classes.info}> |
183 | <p className={classes.info}>{intl.formatMessage(messages.error)}</p> | 174 | {intl.formatMessage(messages.info)} |
184 | )} | 175 | </p> |
185 | 176 | ||
186 | {!log && !error && ( | 177 | <a |
187 | <> | 178 | href={`${DEBUG_API}/privacy.html`} |
188 | <p className={classes.info}> | 179 | target="_blank" |
189 | {intl.formatMessage(messages.info)} | 180 | className={classes.link} |
190 | </p> | 181 | rel="noreferrer" |
191 | 182 | > | |
192 | <a | 183 | {intl.formatMessage(messages.privacy)} |
193 | href={`${DEBUG_API}/privacy.html`} | 184 | </a> |
194 | target="_blank" | 185 | <a |
195 | className={classes.link} | 186 | href={`${DEBUG_API}/terms.html`} |
196 | rel="noreferrer" | 187 | target="_blank" |
197 | > | 188 | className={classes.link} |
198 | {intl.formatMessage(messages.privacy)} | 189 | rel="noreferrer" |
199 | </a> | 190 | > |
200 | <a | 191 | {intl.formatMessage(messages.terms)} |
201 | href={`${DEBUG_API}/terms.html`} | 192 | </a> |
202 | target="_blank" | 193 | |
203 | className={classes.link} | 194 | <Button |
204 | rel="noreferrer" | 195 | type="button" |
205 | > | 196 | label={intl.formatMessage(messages.publish)} |
206 | {intl.formatMessage(messages.terms)} | 197 | className={classes.button} |
207 | </a> | 198 | onClick={() => this.publishDebugInfo()} |
208 | 199 | disabled={isSendingLog} | |
209 | <Button | 200 | /> |
210 | type="button" | 201 | </> |
211 | label={intl.formatMessage(messages.publish)} | 202 | )} |
212 | className={classes.button} | ||
213 | onClick={() => this.publishDebugInfo()} | ||
214 | disabled={isSendingLog} | ||
215 | /> | ||
216 | </> | ||
217 | )} | ||
218 | </div> | ||
219 | </Modal> | 203 | </Modal> |
220 | ); | 204 | ); |
221 | } | 205 | } |