Form field mis-wrapped; styling

joedolson · May 25, 2024 · 5ffbe7b · 5ffbe7b
1 parent 9414ddd
commit 5ffbe7b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -22,6 +22,15 @@ aside.xposter-sales {
 	margin-top: 10px;
 }
 
+.wpt-connection-form .auth-fields {
+	margin: .5rem 0;
+	padding: .25rem 1rem;
+	width:fit-content;
+	background:rgba( 0,0,0,.04 );
+	box-shadow: 3px 3px 3px #ddd;
+	border: 1px solid #bbb;
+}
+
 .wpt-connection-form label {
 	font-weight: 600;
 	display: block;

diff --git a/src/wp-to-twitter-mastodon.php b/src/wp-to-twitter-mastodon.php
@@ -122,6 +122,7 @@ function wtt_connect_mastodon( $auth = false ) {
 		print( '
 			<h3 class="wpt-has-link"><span>' . __( 'Connect to Mastodon', 'wp-to-twitter' ) . '</span> <a href="https://xposterpro.com/connecting-xposter-and-mastodon/" class="button button-secondary">' . __( 'Instructions', 'wp-to-twitter' ) . '</a></h3>
 			<div class="inside ' . $class . '">
+			' . $form . '
 				<ol class="wpt-oauth-settings">
 					<li>' . __( 'Navigate to Preferences > Settings > Development in your Mastodon account.', 'wp-to-twitter' ) . '</li>
 					<li>' . __( 'Click on "New application".', 'wp-to-twitter' ) . '</li>
@@ -132,8 +133,7 @@ function wtt_connect_mastodon( $auth = false ) {
 					<li>' . __( 'Select your application from the list of "Your Applications."', 'wp-to-twitter' ) . '</li>
 					<li>' . __( 'Copy your Access Token', 'wp-to-twitter' ) . '</li>
 					<li>' . __( 'Add your Mastodon server URL', 'wp-to-twitter' ) . '</li>
-			' . $form . '
-					<div class="tokens">
+					<div class="tokens auth-fields">
 					<p>
 						<label for="wpt_mastodon_token">' . __( 'Access Token', 'wp-to-twitter' ) . '</label>
 						<input type="text" size="45" name="wpt_mastodon_token" id="wpt_mastodon_token" value="' . esc_attr( wpt_mask_attr( $ack ) ) . '" />

diff --git a/src/wp-to-twitter-oauth.php b/src/wp-to-twitter-oauth.php
@@ -323,6 +323,7 @@ function wtt_connect_oauth( $auth = false ) {
 		print( '
 			<h3 class="wpt-has-link"><span>' . __( 'Connect to X.com', 'wp-to-twitter' ) . '</span> <a href="https://xposterpro.com/connecting-xposter-and-x-com/" class="button button-secondary">' . __( 'Instructions', 'wp-to-twitter' ) . '</a></h3>
 			<div class="inside ' . $class . '">
+			' . $form . '
 				<ol class="wpt-oauth-settings">
 					<li>' . __( 'Apply for a <a href="https://developer.twitter.com/en/apply-for-access">Developer Account with X.com</a>', 'wp-to-twitter' ) . '<ul>
 						<li><a href="https://developer.twitter.com/en/developer-terms/policy">' . __( 'Review the Terms of Service for use of the X.com API', 'wp-to-twitter' ) . '</a></li>
@@ -335,8 +336,7 @@ function wtt_connect_oauth( $auth = false ) {
 						</ul>
 					</li>
 					<li>' . __( 'Copy your API Key and API Key secret.', 'wp-to-twitter' ) . '
-			' . $form . '
-					<div class="tokens">
+					<div class="tokens auth-fields">
 					<p>
 						<label for="wtt_app_consumer_key">' . __( 'API Key', 'wp-to-twitter' ) . '</label>
 						<input type="text" size="45" name="wtt_app_consumer_key" id="wtt_app_consumer_key" value="' . esc_attr( wpt_mask_attr( $ack ) ) . '" />
@@ -358,7 +358,7 @@ function wtt_connect_oauth( $auth = false ) {
 					<li>' . __( 'Change to the "Keys and Tokens" tab', 'wp-to-twitter' ) . '</li>
 					<li>' . __( 'Generate your Access Token and Secret from the "Authentication Tokens" section.', 'wp-to-twitter' ) . '</li>
 					<li>' . __( 'Add your Access Token, Secret, and Bearer Token:', 'wp-to-twitter' ) . ' (' . __( 'If the Access Level for your Access Token is not "<em>Read and write</em>", return to step 7, change your permissions, and generate new Tokens.', 'wp-to-twitter' ) . ')
-					<div class="tokens">
+					<div class="tokens auth-fields">
 					<p>
 						<label for="wtt_oauth_token">' . __( 'Access Token', 'wp-to-twitter' ) . '</label>
 						<input type="text" size="45" name="wtt_oauth_token" id="wtt_oauth_token" value="' . esc_attr( wpt_mask_attr( $ot ) ) . '" />